前端培训-中级阶段（45）- node 10.x 环境搭建、NPM 包管理器

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

上节课我们了解到了一个可以在本地执行 js 的 javascript 执行环境：NodeJS。今天我们来安装 NodeJS、环境配置、NPM 使用、版本管理。

推荐使用 node 10.x 版本（2018年，最新是 10.22.1），下文我们基于 v10.16.0 版本。

安装 NodeJS

用软件就要安装，不会吧，不会有拷贝一个快捷方式的憨憨吧。

windows

windows 装软件就是选择一个适合版本，然后下载双击打开，无脑下一步即可。

1. node-v12.18.4-x86.msi 32 位
2. node-v10.22.1-x64.msi 64 位

linux

1. 包管理工具。一般装的版本都不行，可以再修改一下版本

   sudo apt-get install nodejs
   sudo apt-get install npm

2. 源码编译。操作起来很费事

   sudo git clone https://github.com/nodejs/node.git
   sudo chmod -R 755 node
   cd node
   sudo ./configure
   sudo make
   sudo make install

3. 使用已编译好的包。

   wget https://nodejs.org/dist/v10.22.1/node-v10.22.1-linux-x64.tar.xz    
   tar xf  node-v10.9.0-linux-x64.tar.xz
   cd node-v10.9.0-linux-x64
   ./bin/node -v 

macOS

因为穷，所以我没有 mac。从网上扣一个吧。

你可以通过以下两种方式在 Mac OS 上来安装 node：

• 1、在官方下载网站下载 pkg 安装包，直接点击安装即可。
• 2、使用 brew 命令来安装：brew install node

环境配置

环境变量是为了方便执行的时候找到对应的程序，不然的话只能每次使用的时候先手动找到文件，然后再使用。

windows 环境变量

默认配置：1. C:\Windows\system32;C:\Windows
cmd 命令提示行中输入 path 可以查看当前的配置。
不过我一般是通过界面的方式设置：我的电脑（右键）， 属性，高级系统设置，高级，环境变量，然后给当前用户修改 PATH

linux 环境变量

默认配置：PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games"

linux 一般是直接使用软连的方式，放入 /usr/local/bin 中。

ln -s /usr/software/nodejs/bin/npm /usr/local/bin/ 
ln -s /usr/software/nodejs/bin/node /usr/local/bin/

NPM

NPM 是随同 NodeJS 一起安装的包管理工具

NPM 的安装

由于 nodejs 已经集成了 npm，所以之前 npm 也一并安装好了。同样可以通过输入 npm -v 来测试是否成功安装。

package.json 和 npm init

package.json 位于模块的目录下，用于定义包的属性：

• name 包名
• version 版本号
• description 描述
• main 入口文件 。指定程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
• scripts 快捷命令
• keywords 关键词
• author 作者
• license 开源协议
• 依赖（开发时 devDependencies、运行时 dependencies）。
• homepage 包的官网 url 。
• contributors 包的其他贡献者姓名。
• repository 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。

我们可以通过 npm init 交互式的创建 package.json 文件。
也可以通过 npm init -y 快捷的创建， -y 意思是所有选择都选 Yes。

{
  "name": "node-sf-20200922",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "'linong' <'[e-mail]'> ('')",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "gulp": "^4.0.2"
  }
}

npm 包管理

npm install <package> 用于安装包，安装分为两种：

• 本地安装（local）。安装之后放在了工程目录下的 node_modules 目录中，代码中只需要通过 require('express') 就可以使用。
• 全局安装（global）。将安装包放在你 node 的安装目录。

npm uninstall <package> 卸载 Node.js 模块
npm update <package> 更新 Node.js 模块

npm install <package> # 本地安装 
npm install <package> -g # 全局安装

npm install、npm install --save、npm install --save-dev

来个题 npm install、npm install --save、npm install --save-dev 有什么不同？

1. npm install <package> ： 安装模块到项目目录下

   1. 安装模块到项目 node_modules 目录下。
   2. 不会修改 package.json 文件。
   3. 运行 npm install 初始化项目时不会下载模块。

2. npm install <package> -g： -g 将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。查看：npm config ls,修改：npm config set prefix.

   1. 安装模块到全局，不会在项目node_modules目录中保存模块包。
   2. 不会修改package.json文件。
   3. 运行 npm install 初始化项目时不会下载模块。

3. npm install <package> --save：（简写：-S）-save 将模块安装到项目目录下，并在 package 文件的 dependencies 属性写入依赖。

   1. 安装模块到项目 node_modules 目录下。
   2. 会在 package.json 文件的 dependencies 属性将模块依赖写入。
   3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
   4. 运行 npm install --production 或者注明 NODE_ENV 变量值为 production 时，会自动下载模块到 node_modules 目录中。

4. npm install <package> --save-dev ：（简写：-D）-save-dev 将模块安装到项目目录下，并在 package.json 文件的 devDependencies 属性写入依赖。

   1. 安装模块到项目 node_modules 目录下。
   2. 会在package.json文件的 devDependencies 属性将模块依赖写入。
   3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
   4. 运行 npm install --production 或者注明 NODE_ENV 变量值为 production 时，不会自动下载模块到node_modules目录中。

使用原则：运行时需要用到的包使用 --save，否则使用 --save-dev。

devDependencies 属性下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev 的形式安装。

像 express 这些模块是项目运行必备的，应该安装在 dependencies 属性下，所以我们应该使用 -save 的形式安装。

npm 版本号

使用NPM下载和发布代码时都会接触到版本号。NPM使用语义版本号来管理代码，这里简单介绍一下。

语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号。当代码变更时，版本号按以下原则更新。

• 如果只是修复bug，需要更新Z位。
• 如果是新增了功能，但是向下兼容，需要更新Y位。
• 如果有大变动，向下不兼容，需要更新X位。

版本号有了这个保证后，在申明第三方包依赖时，除了可依赖于一个固定版本号外，还可依赖于某个范围的版本号。例如"argv": "0.0.x"表示依赖于0.0.x系列的最新版argv。

NPM支持的所有版本号范围指定方式可以查看官方文档。

其他命令

• 使用npm cache clear可以清空NPM本地缓存，用于对付使用相同版本号发布新版本代码的人。
• npm install -g cnpm --registry=https://registry.npm.taobao.org 你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm
• npm search express 搜索模块
• npm list -g 查看所有全局安装的模块

NodeJS 版本管理

写前端的时候我们头疼的是用户用一些奇奇挂怪的浏览器，写 Node 的时候也有头疼的不同的包依赖不同的版本。所以这就要求我们可以切换版本，至少要求我们首次使用的时候可以快速的找到合适的版本（我推荐 10.x 版本，我用着还可以）。

windows 安装还好，从习惯上来讲都是下载、双击、无脑下一步。

linux 就有点头疼了，命令下载、解压、安装、配置环境变量（或者软连到 /usr/bin 下面）。

n

n 是交互式 node.js 版本管理工具。

npm install n -g #安装n
n lts  #安装最新版
n stable #安装稳定版
n #切换版本
n rm  #删除版本

nvm

nvm 也是 Node 版本管理工具。

下载安装

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

命令

nvm install node # 安装最新版本，node 是最新版本的别名
nvm install 6.14.4 # 安装特定版本
nvm ls-remote # 列出可用版本
nvm use node # 选择使用的版本

微信公众号：前端linong

参考文献

1. 前端培训目录、前端培训规划、前端培训计划