2022-03-20

Frontend

node&npm&webpack

一、安装 Node.js

Node.js 发布于 2009 年 5 月，由 Ryan Dahl 开发，是一个基于 Chrome V8 引擎的 JavaScript 运行环境，使用了一个事件驱动、非阻塞式 I/O 模型，让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与 PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。
Node.js 对一些特殊用例进行优化，提供替代的 API，使得 V8 在非浏览器环境下运行得更好，V8 引擎执行 Javascript 的速度非常快，性能非常好，基于 Chrome JavaScript 运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。
传统意义上的 JavaScript 运行在浏览器上，Chrome 使用的 JavaScript 引擎是 V8，Node.js 是一个运行在服务端的框架，它的底层就使用了 V8 引擎，这样就可以使用 javascript 去编写一些服务端的程序，这样也就实现了用 javaScript 去开发 Apache + PHP 以及 Java Servlet 所开发的服务端功能，这样做的好处就是前端和后端都采用 javascript，即开发一份 js 程序即可以运行在前端也可以运行的服务端，这样比一个应用使用多种语言在开发效率上要高，不过 node.js 属于新兴产品，一些公司也在尝试使用 node.js 完成一些业务领域，node.js 基于 V8 引擎，基于事件驱动机制，在特定领域性能出色，比如用 node.js 实现消息推送、状态监控等的业务功能非常合适。
下载 Node.js：https://nodejs.org/en/download/，推荐下载 LTS 版本。
安装完成检查 PATH 环境变量是否设置了 node.js 的路径。在 PATH 变量中添加：%NODE_HOME%; & %NODE_HOME%\npm_modules;。
当前 node 的版本：node -v。

二、安装 NPM

2.1、自动安装 NPM

npm 全称 Node Package Manager，是 node 包管理和分发的工具，使用 NPM 可以对应用的依赖进行管理，NPM 的功能和服务端项目构建工具 maven 差不多，通过 npm 可以很方便地下载 js 库，打包 js 文件。

2.2、设置包路径

包路径就是 npm 从远程下载的 js 包所存放的路径。使用 npm conﬁg ls 查询 NPM 管理包路径（NPM 下载的依赖包所存放的路径）

>npm config ls
; "builtin" config from E:\SOFTWARE\node\node20\node_modules\npm\npmrc

; cache = "E:\\SOFTWARE\\node\\npm_cache" ; overridden by user
; home = "https://npm.taobao.org" ; overridden by user
; prefix = "E:\\SOFTWARE\\node\\npm_modules" ; overridden by user
; registry = "https://registry.npmmirror.com/" ; overridden by user
; strict-ssl = false ; overridden by user

; "user" config from C:\Users\gravityZero\.npmrc

cache = "E:\\SOFTWARE\\node\\npm_cache"
home = "https://npmmirror.com"
prefix = "E:\\SOFTWARE\\node\\npm_modules"
registry = "https://registry.npmmirror.com/"
strict-ssl = false

; node bin location = E:\SOFTWARE\node\node20\node.exe
; node version = v20.15.0
; npm local prefix = C:\Users\gravityZero
; npm version = 10.7.0
; cwd = C:\Users\gravityZero
; HOME = C:\Users\gravityZero
; Run `npm config ls -l` to show all defaults.

NPM 默认的管理包路径在 C:/用户/[用户名]/AppData/Roming/npm/node_meodules，为了方便对依赖包管理，将管理包的路径设置在单独的地方，此处将安装目录设置在 node.js 的目录下，创建 npm_modules 和 npm_cache，执行下边的命令：

npm config set prefix "E:\SOFTWARE\node\npm_modules" 
npm config set cache "E:\SOFTWARE\node\npm_cache"

此时再使用 npm conﬁg ls 查询 NPM 管理包路径发现路径已更改。

2.3、安装 cnpm

npm 默认会去国外的镜像去下载 js 包，在开发中通常我们使用国内镜像，这里使用淘宝镜像。
下边来安装 cnpm：有时我们使用 npm 下载资源会很慢，所以我们可以安装一个 cnmp (淘宝镜像) 来加快下载速度。
输入命令，进行全局安装淘宝镜像：

npm install -g cnpm --registry=https://registry.npmmirror.com

安装后，可以使用以下命令来查看 cnpm 的版本

cnpm -v 
>>>
cnpm@7.1.1 (E:\SOFTWARE\node\node14\npm_modules\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.16 (E:\SOFTWARE\node\node14\npm_modules\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@14.16.1 (E:\SOFTWARE\node\node14\node.exe)
npminstall@5.8.0 (E:\SOFTWARE\node\node14\npm_modules\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=E:\SOFTWARE\node\node14\npm_modules
win32 x64 10.0.15063
registry=https://registry.npmmirror.com

nrm ls 查看镜像已经指向 taobao：

nrm ls
  npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
* taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/
  huawei ------- https://repo.huaweicloud.com/repository/npm/
  local -------- http://192.168.1.134:7001/

如果 nrm 没有安装则需要进行全局安装：
cnpm install -g nrm
使 nrm use XXX 切换镜像：
nrm use XXX

请求到的 https://registry.npm.taobao.org/cnpm 失败，原因是证书已经过期。
2024 年 1 月 22 日，淘宝 NPM 镜像站的域名 registry.npm.taobao.org 的 SSL 证书过期。
解决方案：
1、清理 NPM 的缓存
npm cache clean --force
2、切换到新的 NPM 镜像站
npm config set registry https://registry.npmmirror.com
3、检查是否成功切换到新的镜像站
npm config get registry
如果这个命令返回的是 https://registry.npmmirror.com，那么就说明已经成功切换到了新的镜像站。

三、安装 webpack

3.1、连网安装

webpack 安装分为本地安装和全局安装：
本地安装：仅将 webpack 安装在当前项目的 node_modules 目录中，仅对当前项目有效。
全局安装：将 webpack 安装在本机，对所有项目有效，全局安装会锁定一个 webpack 版本，该版本可能不适用某个项目。全局安装需要添加 -g 参数。
进入 webpacktest 测试目录，运行：
1、本地安装：
只在我的项目中使用 webpack，需要进行本地安装，因为项目和项目所用的 webpack 的版本不一样。本地安装就会将 webpack 的 js 包下载到项目下的 npm_modeuls 目录下。
在门户目录下创建 webpack 测试目录 webpacktest01。

npm install --save-dev webpack 或 cnpm install --save-dev webpack
npm install --save-dev webpack-cli (4.0 以后的版本需要安装 webpack-cli)

2、全局安装加 -g，如下：全局安装就将 webpack 的 js 包下载到 npm 的包路径下。

npm install webpack -g 或 cnpm install webpack -g

3、安装 webpack 指定的版本：
此处使用 webpack3.6.0，安装 webpack3.6.0：
进入 webpacktest 测试目录，运行：

cnpm install --save-dev webpack@3.6.0

全局安装：

npm install webpack@3.6.0 -g 或 cnpm install webpack@3.6.0 -g

3.2、非连网安装

参考上边 “非连网环境安装 cnpm” 描述，将资料中的 npm_modules.zip 到 node.js 安装目录，并解压 npm_modules.zip 覆盖本目录下的 npm_modules 文件夹。
说明：已执行 “非连网环境安装 cnpm” 下的操作不用重复执行。
测试：
在 cmd 状态输入 webpack，出现如下提示说明 webpack 安装成功。

暂无