前端工程化-Node.js 第三方模块与npm

以下皆为拉勾教育课件内笔记

第三方模块

Node.js 中的第三方模块是由社区维护的，有一个公共的平台 http://npmjs.com/。在这个平台上有超过 100 万个第三方模块。这里的第三方模块也叫包。前端工程化中的大部分工具，都以包的形式，存在与 npmjs.com 上

第三方模块使用前，需要单独安装，安装需要借助 npm 命令。

npm

简介

npm（Node Package Manager）是包管理工具。npm 会跟随 Node.js 一起安装。

# 验证 npm 是否已经安装
npm --version
或
npm -v

npm 可以帮我们下载（安装）包和包的依赖

• 包：就是一坨代码，就是 Node.js 的第三方模块
• 包的依赖：是指包的辅助代码（例如：下载 Bootstrap 时，必须先下载 jQuery，因为 Bootstrap 是基于 jQuery 开发的，没有 jQuery，Bootstrap 就运行不起来。此时，我们说：Bootstrap 依赖 jQuery ）

npm官网：https://www.npmjs.com/
在 npm 上，有超过 1000000 （一百万）个软件包。

修改 npm 镜像源

npm 命令下载包的资源地址，成为 npm 的镜像源。

默认 npm 的镜像源是国外的（npmjs.com），下载速度慢，为了提高下载速度，可以将 npm 的镜像源设置为国内的地址（例如：淘宝镜像源）

设置命令为:

# 修改npm的镜像源
npm config set registry https://registry.npm.taobao.org

# 验证是否更改成功（查看镜像源）：
npm config get registry

全局安装（安装全局工具）

通过 npm 安装包时，考虑两种情况：

配置项	描述
全局安装	包在多个项目中都能用到；此时将包当作全局工具使用 举例：公交车
局部安装	包只在当前项目中使用，其他项目不用，我们可以只在当前项目中安装包 举例：私家车

如果需要将 npm 包当作工具使用，就需要在命令行中全局安装。通过 --global 参数来指定。

安装命令是：npm install --global 或 npm i -g

全局安装后的包放在那里了？

Windows下，全局安装的包默认存在 C:\Users\当前用户名\AppData\Roaming\npm\node_modules 下

Mac 下，全局安装的包默认存在 /usr/local/bin/lib/node_modules 下

例如：安装 serve 包，作为web服务器。

# npm install  --global // 全局安装模块

# 以serve为例，将 https://www.npmjs.com/package/serve 模块全局安装到本地
npm install --global serve 
# 或 简写为
npm i -g serve

# 查看是否安装成功
serve -v # 查看serve版本
serve -h # 查看帮助信息

# 启动 web 服务
serve folder_name # 启动指定目录下的项目
# 或
serve . # 启动当前目录

局部安装（安装项目包）

如果你需要的第三方包，只是在某个项目中使用（而不是作为全局工具来用），你可以在项目中进行局部安装。

1. 创建项目目录

   mkdir project-name
   

2. 进入项目目录

   cd project-name
   

3. 初始化项目

   init 命令会帮我们创建 package.json 文件

   # 初始化项目
   npm init # 回车后会进入交互式问答窗口，根据问答结果，帮我们生成 package.json
   
   # --yes 可以略过问答窗口（所有问题的答案都时默认值）
   npm init --yes
   # 或
   npm init -y
   

   项目初始化结束后，我们得到 package.json 文件

   {
     "name": "01_start",     # 项目名称
     "version": "1.0.0",     # 项目版本
     "description": "",      # 项目描述
     "main": "index.js",     # 项目入口
     "scripts": {            # 脚本命令
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "keywords": [],         # 关键字,用于搜索引擎搜索
     "author": "",           # 作者信息
     "license": "ISC"        # 开源许可
   }
   
   

4. 安装包

   项目中安装的包，默认存在 当前项目/node_modules 目录下

   安装包时，涉及到两个重要的参数：

   • npm install --save

     • 安装好后，包的信息会写入 package.json 的 dependencies 中；
     • dependencies 中的包，在开发和生产环境都使用，例如：jQuery。

   • npm install --save-dev

     • 安装好后，包的信息会写入 package.json 的 devDependencies 中
     • devDependencies 中的包只用于开发环境，生产环境不需要。例如 minify，项目上线后，就不需要压缩文件了。

   配置项	命令	描述
   devDependencies	--save-dev 简写 -D	开发环境，管理的依赖包仅在开发阶段有效
   dependencies	--save 简写 -S	生产环境，管理的依赖包在项目上线后依然有效

   # --save（-S） 安装好后写入 package.json 的 dependencies 中；
   # dependencies 依赖的包不仅开发环境能使用，生产环境也能使用，例如 jQuery 开发和线上环境都需要
   npm install jquery --save
   # 或
   npm i jquery -S
   
   # --save-dev（-D） 安装好后写入 package.json 的 devDependencies 中；
   # devDependencies是只会在开发环境下依赖的模块，例如 minify 只需要开发环境使用，上线后就不需要了
   npm install minify --save-dev
   # 或
   npm i minify -D
   

5. 命令行执行

   如果包安装在当前项目中（局部安装），则命令的执行路径是当前项目下的 .\node_modules\.bin 目录下。

   # 局部安装包的执行路径
   .\node_modules\.bin\lessc input.less output.css
   

   如果包是全局安装，则命令执行的路径也是全局的

   # 全局安装包的执行路径
   lessc input.less output.css