Nodejs

序言

安装Node

配置npm

配置npm在安装全局模块时的路径和缓存cache的路径

因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:Users用户名AppDataRoaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，

所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，如图所示：

 然后在cmd命令下执行如下两个命令：

npm config set prefix "D:WebNode
odejs
ode_global"
npm config set cache "D:WebNode
odejs
ode_cache"

配置环境变量

执行完后，配置环境变量，如下：

“环境变量” -> “系统变量”：新建一个变量名为 “NODE_PATH”， 值为“D:WebNode odejs ode_global”

“环境变量” -> “用户变量”：编辑用户变量里的Path，将相应npm的路径（“C:Users用户名AppDataRoaming pm”）改为：“D:WebNode odejs ode_global”

 

创建基本的webpack4.x项目

1. 运行npm init -y 快速初始化项目

2. 在项目根目录创建src源代码目录和dist产品目录

3. 在 src 目录下创建 index.html

4. 使用 cnpm 安装 webpack ，运行cnpm i webpack webpack-cli -D

   • 如何安装 cnpm: 全局运行 npm i cnpm -g

5. 注意：webpack 4.x 提供了 约定大于配置的概念；目的是为了尽量减少 配置文件的体积；

   • 默认约定了：

   • 打包的入口是src -> index.js

   • 打包的输出文件是dist -> main.js

   • 4.x 中 新增了 mode 选项(为必选项)，可选的值为：development 和 production; 

cnpm install webpack -g

cnpm install webpack-cli -g

webpack -v

VsCode无法运行cnmp命令解决办法

cnpm : 无法加载文件 C:software odejs ode_globalcnpm.ps1，因为在此系统上禁止运行脚本

以管理员身份运行windows powershell，运行命令set-ExecutionPolicy RemoteSigned即可。

html-webpack-plugin

Error: Cannot find module 'html-webpack-plugin'

cnpm i  html-webpack-plugin -D

npm run build

package.json中的script:

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
  }

cnpm i webpack-dev-server -D

cnpm i webpack-cli -D

npm run dev

在项目中使用 react

运行 cnpm i react react-dom -S 安装包

• react： 专门用于创建组件和虚拟DOM的，同时组件的生命周期都在这个包中

• react-dom： 专门进行DOM操作的，最主要的应用场景，就是ReactDOM.render()

JSX语法

babel

babel到底做了什么？怎么做的？

babel 7.x 结合 webpack 4.x 配置 的正确方法

https://www.pianshen.com/article/2145265814/

简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。

安装Babel依赖包

cnpm i @babel/core @babel/cli @babel/preset-env -D

说明：i是install的简写，core是Babel的核心库，cli是Babel命令行，preset-env是预设，-D 指的是安装在本地和 --save-dev作用一致。

.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

preset

官方内容，目前包括 env, react, flow, minify 等。这里最重要的是 env，后面会详细介绍。
stage-x，这里面包含的都是当年最新规范的草案，每年更新。

这里面还细分为

Stage 0 - 稻草人: 只是一个想法，经过 TC39 成员提出即可。

Stage 1 - 提案: 初步尝试。

Stage 2 - 初稿: 完成初步规范。

Stage 3 - 候选: 完成规范和浏览器初步实现。

Stage 4 - 完成: 将被添加到下一年度发布。

资料

Node.js安装详细步骤教程(Windows版)

Webpack4.x与babel7.x的配置