node.js和webpack安装

使用vue.js开发大型应用需要使用webpack打包工具。webpack是一个前端资源的打包工具，它可以将js,image,css等资源当成一个模块进行打包。

webpack基于node.js运行，首先需要安装node.js。

node.js是一个JavaScript的运行环境。

一、下载node.js

官网：https://nodejs.org/en/

注意：最好不要安装最新的版本，否则后面会有很多麻烦。

node.js 8.11.4版本安装地址：https://mirrors.cloud.tencent.com/nodejs-release/v8.11.4/

 下载后的文件：

二、安装node.js

 

 

 

 

 

 

 检查path环境变量是否设置了node.js的路径

 查看node.js的版本

C:Usersmiracle>node -v
v14.18.0

三、安装NPM

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

node.js已经集成了npm工具，查看npm 版本

C:Usersmiracle>npm -v
6.14.15

设置包路径

包路径就是npm从远程下载的js包所存放的路径。

使用 npm config ls 查询NPM管理包路径（NPM下载的依赖包所存放的路径）

C:Usersmiracle>npm config ls
; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/6.14.15 node/v14.18.0 win32 x64"

; builtin config undefined
prefix = "C:\Users\miracle\AppData\Roaming\npm"

; node bin location = D:install
odejs
ode.exe
; cwd = C:Usersmiracle
; HOME = C:Usersmiracle
; "npm config ls -l" to show all defaults.

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

我们安装node.js在D:install odejs下，

先在nodejs目录下新建npm_modules和npm_cache两个包

 所以执行命令如下：

npm config set prefix "D:install
odejs
pm_modules"
npm config set cache "D:install
odejs
pm_cache"

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

C:Usersmiracle>npm config ls
; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/6.14.15 node/v14.18.0 win32 x64"

; userconfig C:Usersmiracle.npmrc
cache = "D:\install\nodejs\npm_cache"
prefix = "D:\install\nodejs\npm_modules"

; builtin config undefined

; node bin location = D:install
odejs
ode.exe
; cwd = C:Usersmiracle
; HOME = C:Usersmiracle
; "npm config ls -l" to show all defaults.

四、安装cnpm

npm默认会去国外的镜像去下载js包，在开发中通常我们使用国内镜像，这里我们使用淘宝镜像 下边我们来安装cnpm：

有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。 输入命令，进行全局安装淘宝镜像。

注意：要以管理员身份运行cmd。否则会报operation not permitted。

C:Windowssystem32>npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
D:install
odejs
pm_modulescnpm -> D:install
odejs
pm_modules
ode_modulescnpmincnpm
+ cnpm@7.1.0
added 713 packages from 970 contributors in 37.83s

 将cnpm的执行路径添加到windows环境变量：D:install odejs pm_modules

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

C:Windowssystem32>cnpm -v
cnpm@7.1.0 (D:install
odejs
pm_modules
ode_modulescnpmlibparse_argv.js)
npm@6.14.15 (D:install
odejs
pm_modules
ode_modulescnpm
ode_modules
pmlib
pm.js)
node@8.11.4 (C:Program Files
odejs
ode.exe)
npminstall@5.1.2 (D:install
odejs
pm_modules
ode_modulescnpm
ode_modules
pminstalllibindex.js)
prefix=D:install
odejs
pm_modules
win32 x64 10.0.19043
registry=https://registry.npmmirror.com

 nrm ls 查看镜像已经指向taobao

C:Windowssystem32>nrm ls
'nrm' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

安装nrm，注意：使用管理员运行cmd

C:Windowssystem32>npm install -g nrm
Downloading nrm to D:install
odejs
pm_modules
ode_modules
rm_tmp
Copying D:install
odejs
pm_modules
ode_modules
rm_tmp\_nrm@1.2.4@nrm to D:install
odejs
pm_modules
ode_modules
rm
Installing nrm's dependencies to D:install
odejs
pm_modules
ode_modules
rm/node_modules
[1/9] ini@^1.1.0 installed at node_modules\_ini@1.3.8@ini
[2/9] humps@^2.0.1 installed at node_modules\_humps@2.0.1@humps
[3/9] extend@^3.0.0 installed at node_modules\_extend@3.0.2@extend
[4/9] commander@^2.9.0 installed at node_modules\_commander@2.20.3@commander
[5/9] async@^1.5.2 installed at node_modules\_async@1.5.2@async

WARN node unsupported "node@v8.11.4" is incompatible with open@>=6.0.0, expected node@>=12
[6/9] open@>=6.0.0 installed at node_modules\_open@8.3.0@open
[7/9] only@0.0.2 installed at node_modules\_only@0.0.2@only
[8/9] request@^2.72.0 installed at node_modules\_request@2.88.2@request

WARN node unsupported "node@v8.11.4" is incompatible with npm@latest, expected node@^12.13.0 || ^14.15.0 || >=16
[9/9] npm@latest installed at node_modules\_npm@8.0.0@npm
deprecate request@^2.72.0 request has been deprecated, see https://github.com/request/request/issues/3142
deprecate request@2.88.2 › har-validator@~5.1.3 this library is no longer supported
deprecate request@2.88.2 › uuid@^3.3.2 Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
Recently updated (since 2021-10-02): 2 packages (detail see file D:install
odejs
pm_modules
ode_modules
rm
ode_modules.recently_updates.txt)
  2021-10-08
    → npm@latest(8.0.0) (04:11:10)
  2021-10-07
    → open@>=6.0.0(8.3.0) (23:58:07)
All packages installed (58 packages installed from npm registry, used 3s(network 3s), speed 1.07MB/s, json 57(286.99KB), tarball 3.34MB)
[nrm@1.2.4] link D:install
odejs
pm_modules
rm@ -> D:install
odejs
pm_modules
ode_modules
rmcli.js

再次执行nrm ls命令

C:Windowssystem32>nrm ls

  npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/

使nrm use cnpm切换 镜像

nrm use cnpm

五、安装webpack

全局安装webpack3.6.0

cnpm install webpack@3.6.0 -g