前端包管理工具与配置项

任何一个项目的构建离不开工具和统一的管理标准，在项目开发和维护过程中，我们需要了解安装包的相应工具和配置文件，以此来有效的进行项目的迭代和版本的更新，为项目提供基本的运行环境。

包管理工具

包管理工具顾名思义就是统一管理这些轮子的软件或者工具，它以多种方式自动处理项目依赖关系、提供了命令行工具（CLI）、支持跟踪依赖项和版本等功能，除此之外还可以安装、卸载、更新和升级包，配置项目设置，运行脚本等等。

简单的说： 包就像一个大仓库，仓库里雇佣了很多机器人，你只需要往仓库里丢东西即可，仓库里的机器人会自动给我们进行依赖包分类，如果需要一些个性化的服务，那么我们进行配置一下就可以了，就可以按我所配置的方式进行工作。

常用的高级语言基本都有自己的包管理工具

• Java 语言有 Maven 仓库、Gradle；
• Go 语言有 dep 和 glide；
• Python 语言有 pip；
• Ruby 语言有 Gem 与 Bundler；
• PHP 语言有 （据说是最好的编程语言）Composer；
• Node.js 有多个包管理工具 NPM 仓库、Yarn 等。

为什么会有包管理工具？

我们可以回想 Jquery 时代， 前端在开发项目是什么样的？

JS功能:

• 需要什么插件，去百度搜寻各种插件 ，然后将插件放置到项目目录下，然后在页面中引入js路径，使用插件功能实现需求。
• 自己造个插件轮子

UI 功能：

• 查找类似UI的模板，复制粘贴一把梭
• 自己封装个ui模板，套用

.......

放到如今现在，各个框架满天飞的时代，那得累死你。

• 我们得保证每个js文件执行引入的顺序，以及文件与文件的依赖关系，不然就会出现各种奇怪的BUG.
• 工具的版本问题，我们想升级项目中的依赖工具，就要去寻找资源，手动下载，手动替换。
• .....

这时，前端的包管理工具出现了，解决了此类问题。

作为各种包管理工具中最早出现的开拓者，Npm 是 Node.js 官方提供的，他的出现同时也制定了一些列的包管理规范。

• 将所有第三方依赖包放在 node_modules 这个文件目录下，我们在增加，删除，升级依赖也只是更新这个文件下的相关依赖包。
• 增加 package.json 文件，这个文件中存放本项目及项目的依赖和版本信息，这样我们就可以一目了然的了解本项目用到了什么，都是什么版本的，不用多处寻找。
• 在使用依赖时，Node 提供的支持是内置的 require 方法，默认会到这个目录下去检索模块，无需手动指定路径。

有哪些包管理工具

主流的前端包管理工具有 npm、yarn、pnpm、以及国内的镜像 cnpm、tyarn 等，这是包管理器都是基于 nodejs。

• npm 是 2010 年发布的 nodejs 依赖管理工具，在此之前，前端的依赖管理都是手动下载和管理的。

<!---->

• yarn 是 Facebook 于 2016 年 发布的替代 npm 的包管理工具，还可以作为项目管理工具，定位是快速、可靠、安全的依赖管理工具。

<!---->

• pnpm 是 2017 年发布的一款替代 npm 包管理工具，具有速度快、节省磁盘空间的特点。

npm yarn package.json

npm

npm 是 Node Package Manager 的简称，顾名思义，它是 node 的包管理工具，也是目前世界上最大的开源库生态系统。

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

安装 Node 的同时，会自动安装 npm, 不需要手动安装npm 了。

npm 常用命令

• 版本查看

$ npm -v

• 使用淘宝镜像的命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 初始化nodejs项目，生成 package.json 文件

npm init -y

-y 直接生成默认的package.json 文件，不需要自定义设置

• 局部安装

npm install <package_name>

• 全局安装 -g

npm install -g <package_name>

安装到全局并不会体现到package.json 里面

• 安装到生产依赖 --save

npm install <package_name> --save | -S

安装到当前项目，并将包信息写入到dependencies

• 安装到开发依赖 --save-dev

npm install <package_name> --save-dev | -D

安装到当前项目 并写入到devDependencies

• devDependencies与dependencies 的区别:

devDependencies 是本地开发时用的依赖项

dependencies 是生产环境的依赖项

• 卸载模块

$ npm uninstall express

卸载后，你可以到 /node_modules/ 目录下查看包是否还存在，或者使用以下命令查看：

$ npm ls

• 更新模块

$ npm update express

• 搜索模块

$ npm search express

npm 安装命令

1、局部安装

npm install <package_name>

说明 安装到当前项目

npm 5x 以后 这个命令等同于npm install --save <package_name> 同时也是会同样写入到依赖 dependencies

2、 全局安装 -g

npm install -g <package_name>

安装到全局并不会体现到package.json 里面

3、安装到生产依赖 --save

npm install <package_name> --save | -S

安装到当前项目，并将包信息写入到dependencies

4、安装到开发依赖 --save-dev

npm install <package_name> --save-dev | -D

安装到当前项目 并写入到devDependencies

devDependencies与dependencies 的区别:

devDependencies 是本地开发时用的依赖项

dependencies 是生产环境的依赖项

1. -- save 理解
2. node --save可以省略掉手动修改package.json的步骤
3. 当你为你的模块安装一个依赖模块时，正常情况下你得先安装他们（在模块根目录下npm install module-name），然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里（dependencies）。

<!---->

• -save和save-dev可以省掉你手动修改package.json文件的步骤。

npm install module-name -save 自动把模块和版本号添加到dependencies部分

npm install module-name -save-dev 自动把模块和版本号添加到devdependencies部分

1. 安装依赖
2. 安装依赖包

npm install

会将package.json 里面的devDependencies和dependencies下的所有包都会下载到项目的node_modules文件夹下(没有的改文件夹会新建一个)

• 只安装生产依赖

npm install --production

• 查看全局安装的模块

npm list -g

• 如果要查看某个模块的版本号，可以使用命令如下

npm list grunt

npm 卸载

$ npm uninstall 包名

查看卸载的包是否存在

 npm ls

npm 更新包

npm update 包名

npm 搜索包

npm search 包名

npm 版本号

在自己发布 插件时，需要填写 package.json 的 version，下面我就来了解一下 版本号的一些知识点，如何正确写 版本号。

NPM使用语义版本号来管理代码。

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

💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥💥

注意

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

在 nodejs 版本管理中，还允许使用 ～ ^ * 字符来管理版本的范围：

• ^: 不允许修改最左边非0版本 (^2.6.11: 版本 >= 2.6.11 且 < 3.0.0)
• ~: 如果指定了次要版本，则只允许补丁版本更新，如果没有，则允许次要版本更新 (~3.1.3: 版本 >= 3.1.3 且 < 3.2.0)
• *: 任何非预发版本 (版本 >=0.0.0)

npm 使用淘宝 npm 镜像

直接使用npm 下载包是很慢的，有时会下载失败，因为npm 官方镜像在国外，国内访问比较慢。 这里我们可以使用 淘宝的镜像来下载，速度会快很多。

npm 镜像 切换 淘宝镜像源

npm config set registry https://registry.npm.taobao.org

npm 镜像 切换到 官方镜像源

npm config set registry https://registry.npmjs.org 

yarn

yarn 是由 Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，yarn 是为了弥补 npm 的一些缺陷而出现的。

yarn 与 npm 对比

• yarn 安装依赖速度快

（yarn是 同步下载所有依赖，npm是按照队列下载依赖，只会等当前依赖下载完，才会进行下载另一个依赖。）

• 语义化指令， 相对 npm 更清晰

（yarn ： yarn add/remove npm：npm install/uninstall）

• 简洁的输出信息

（yarn 下载依赖时，输出的信息很少，只会输出必要的信息。 npm 信息比较冗长。）

• 离线模式

（yarn会有一个缓存目录，会缓存以前安装过的软件包，再次安装时就不必从网络下载了，大大加速安装速度）

• 性能优化

（下载软件时会自动优化请求顺序，使安装效率更高。）

• 网络回弹

（yarn在某个安装包请求失败时不会导致安装失败，它会自动去尝试重新安装。而npm则会毫不犹豫的失败，导致得再来一次，耗费时间）

项目中使用yarn

1. 安装 yarn

npm i -g yarn

1. 使用 yarn

<!---->

1. 写入生成package.json，确定项目中需要哪些依赖（如果已有该文件跳过本步骤）。
2. 执行 yarn 初始化项目依赖，生成 yarn.lock 文件。
3. 通过yarn add 命令添加需要安装的依赖。
4. 确定想升级某个依赖的最新版本时，使用yarn upgrad命令升级。

常用yarn 命令

yarn 命令详解

package.json

package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "package": "vue-cli-service build --target lib ./src/package/index.js  --name pro-form --dest ProForm"
  },
  "dependencies": {
    "@codemirror/lang-html": "^6.1.2",
    "@codemirror/lang-javascript": "^6.1.0",
    "@codemirror/lang-json": "^6.0.0",
    "@codemirror/theme-one-dark": "^6.1.0",
    "axios": "^1.1.2",
    "codemirror": "^6.0.1",
    "core-js": "^3.6.5",
    "element-ui": "^2.15.10",
    "vue": "^2.6.11",
    "vue-codemirror": "^6.1.1",
    "vue-json-viewer": "^2.2.22",
    "vue-router": "^3.2.0",
    "vuedraggable": "^2.24.3",
    "vuex": "^3.4.0",
    "x-pro-form": "^1.0.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-eslint": "~4.5.13",
    "@vue/cli-plugin-router": "~4.5.13",
    "@vue/cli-plugin-vuex": "~4.5.13",
    "@vue/cli-service": "^4.5.19",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "prettier": "^2.2.1",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/prettier"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

package 创建

package.json 文件创建有两种方式，手动创建或者自动创建。

• 手动创建undefined直接在项目根目录新建一个 package.json 文件，然后输入相关的内容。
• 自动创建undefined也是在项目根目录下执行 npm init，然后根据提示一步步输入相应的内容完成后即可自动创建。

packge.json 详解

name：项目/模块名称，长度必须小于等于214个字符，不能以"."(点)或者"_"(下划线)开头，不能包含大写字母。

version：项目版本。

author：项目开发者，它的值是你在https://npmjs.org网站的有效账户名，遵循“账户名<邮件>”的规则，例如：zhangsan zhangsan@163.com。

description：项目描述，是一个字符串。它可以帮助人们在使用npm search时找到这个包。

keywords：项目关键字，是一个字符串数组。它可以帮助人们在使用npm search时找到这个包。

private：是否私有，设置为 true 时，npm 拒绝发布。

license：软件授权条款，让用户知道他们的使用权利和限制。

bugs：bug 提交地址。

contributors：项目贡献者 。

repository：项目仓库地址。

homepage：项目包的官网 URL。

dependencies：生产环境下，项目运行所需依赖。

devDependencies：开发环境下，项目所需依赖。

scripts：执行 npm 脚本命令简写，比如 “start”: “react-scripts start”, 执行 npm
start 就是运行 “react-scripts start”。

bin：内部命令对应的可执行文件的路径。

main：项目默认执行文件，比如 require(‘webpack’)；就会默认加载 lib 目录下的 webpack.js
文件，如果没有设置，则默认加载项目跟目录下的 index.js 文件。

module：是以 ES Module(也就是 ES6)模块化方式进行加载，因为早期没有 ES6 模块化方案时，都是遵循CommonJS 规范，而 CommonJS 规范的包是以 main 的方式表示入口文件的，为了区分就新增了 module 方式，但是 ES6 模块化方案效率更高，所以会优先查看是否有 module 字段，没有才使用 main 字段。

eslintConfig：EsLint 检查文件配置，自动读取验证。

engines：项目运行的平台。

browserslist：供浏览器使用的版本列表。

style：供浏览器使用时，样式文件所在的位置；样式文件打包工具parcelify，通过它知道样式文件的打包位置。

files：被项目包含的文件名数组。

该文件是由一系列键值对构成的 JSON 对象，每一个键值对都有其相应的作用.

• dependencies 和 devDependencies 分别为项目生产环境和开发环境的依赖包配置
• 像 @vue/cli-service 这样只用于项目开发时的包我们可以放在 devDependencies 下
• 像 vue-router 这样结合在项目上线代码中的包应该放在 dependencies 下

运行环境配置

  "scripts":  {
              "test": "echo "Error: no test specified" && exit 1",
              "dev": "cross-env NODE_ENV=dev nodemon ./bin/www.js",
              "prd": "cross-env NODE_ENV=production nodemon ./bin/www.js"
  }
  cross-env：设置环境变量插件
  npm run dev
  npm run后面跟script中设置的变量名；执行后面的脚本
  npm run是npm run-script的简写，顾名思义就是执行脚本。执行的脚本配置在package.json中的scripts对象。

小结

npm

#生成 package.json 文件（需要手动选择配置）

npm init

#生成 package.json 文件（使用默认配置）

npm init -y

#一键安装 package.json 下的依赖包

npm i

#在项目中安装包名为 xxx 的依赖包（配置在 dependencies 下）

npm i xxx

#在项目中安装包名为 xxx 的依赖包（配置在 dependencies 下）

npm i xxx --save

#在项目中安装包名为 xxx 的依赖包（配置在 devDependencies 下）

npm i xxx --save-dev

#全局安装包名为 xxx 的依赖包

npm i -g xxx

#运行 package.json 中 scripts 下的命令

npm run xxx




# 将当前模块发布到 npmjs.com，需要先登录   插件发布到npm 仓库
npm publish

yarn

# 生成 package.json 文件（需要手动选择配置）
yarn init

# 生成 package.json 文件（使用默认配置）
yarn init -y

# 一键安装 package.json 下的依赖包
yarn

# 在项目中安装包名为 xxx 的依赖包（配置在 dependencies 下）,同时 yarn.lock 也会被更新
yarn add xxx

# 在项目中安装包名为 xxx 的依赖包（配置在配置在 devDependencies 下）,同时 yarn.lock 也会被更新
yarn add xxx --dev

# 全局安装包名为 xxx 的依
yarn global add xxx

# 运行 package.json 中 scripts 下的命令
yarn xxx

# 列出 xxx 包的版本信息
yarn outdated xxx

# 验证当前项目 package.json 里的依赖版本和 yarn 的 lock 文件是否匹配
yarn check

# 将当前模块发布到 npmjs.com，需要先登录
yarn publish