从零开始，用elementui躺坑vue - npm

码农天地 - 2021-01-05 13:24:56

---

npm: node package manager, 翻译成中文就是node包管理工具。随着Node.js的火爆，使用npm共享js代码已经成为每个前端开发者的必备工具。但就现状而言：一部分开发者还只是停留在npm install层面。更有甚者，一言不合就开删, rm -f node_modules。今天就让小编带你去了解npm的基本原理和实践。

1. npm init

初始化package.json文件，生成name，version，script等字段。具体说明推荐npm的package.json中文文档

2. npm install

依赖管理是npm的核心内容。原理是执行npm install从package.json中安装依赖。

npm install \<package\>后，我们可以在node_modules中查看安装的依赖包。虽然开发者只需关注业务中的引用依赖即可。

这是开发者最常用的指令，clone项目或者新建必须的第一个指令。

3. npm --save-dev与npm --save

--save || -S： 运行依赖（发布）,将包信息添加到dependencies，是需要发布到生产环境的。

--save-dev || -D:开发依赖（辅助），将包信息添加到devDependencies，只用于开发环境

安装依赖时如何判断？ 官方说法是：--save-dev我们只在开发时才用得到它，生产部署后则不执行。--save：我们在开发完成后，肯定还要依赖他们，否则就用不了。简单的说：就是如果没有该依赖则程序就跑不起来，则必须使用--save。如vue-router. 如果该依赖只是为了编译、构建、生成文档则使用--save-dev

4. package-lock.json

package-lock.json文件的作用是锁定安装时的包的版本号。

4.1 ^: 主版本号控制

^是npm默认的版本符号，举个例子

"requires": {
  "graceful-fs": "^4.1.2",
  "inherits": "~2.0.0",
  "mkdirp": ">=0.5 0",
  "rimraf": "2"
}

这个符号定义了向后（新）兼容依赖，告诉npm可以安装8.0.33或者一个大于它的版本，但是主要版本为4.x.x的版本

4.2 ~： 次版本号控制

~是次版本号控制，举个例子

"requires": {
  "graceful-fs": "^4.1.2",
  "inherits": "~2.0.0",
  "mkdirp": ">=0.5 0",
  "rimraf": "2"
}

与^的区别是，～版本只能规定次版本号2.0.x，仅仅是作用域不同而已

4.3 >: beta版本指定了可以安装的beta版本。可以理解为大于或等于。如： 0.5.1

因此，当我们使用npm install会根据package-lock.json文件进行安装，保证不同环境、不同时间下当依赖是一样的。而不是根据package.json文件。因为pacakge-lock.json给每个依赖都标明了版本、获取地址、哈希值，所以，每次安装都是同一个相同的结果。不管你在什么机器上面或者什么时候安装。

基于此，我们手动更改package.json文件安装将不会更新包，想要更新则必须指定版本号。如： npm install axious@3.2.0 --save-dev,这种方式来版本更新package-lock.json则可以。

谨记：不要手动修改package-lock.json

5. 依赖管理不要手动修改package-lock.json文件项目组成员首次checkout / clone 项目代码时，应手动npm install一下，确保同步依赖小版本升级依赖，可以使用npm updatenpm uninstall <package> 删除依赖包任何项目组成员在更新package.json, package-lock.json文件后，项目组其他成员应重新拉取，并使用npm install同步更新依赖6. npm scripts

{
 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  }
}

在vue项目中，npm run dev可以说是我们最常见的命令了，也许我们从来都没有过这条脚本命令的原理。今天就让小编初窥一二。详情可以参考阮一峰的npm scripts 使用指南

上述代码是package.json文件的一个片段，里面的scripts字段是一个对象。它的每一个属性，对应一段脚本。比如npm run dev命令对应的脚本就是webpack-dev-server --inline --progress --config build/webpack.dev.conf.js。

npm的脚本原理非常简单，每当执行npm run，就会自动创建一个shell，比较特别的是，npm新建的这个shell，会将node_modules/.bin子目录加入path变量，执行结束后，在将PATH恢复原样。

这意味着，当前目录的node_modules/.bin子目录里面的所有脚本，都可以直接用脚本名调用，而不必加上路径。

7. npm安装失败解决方法

当clone或者初始化项目时，npm i报错时，不要心急，尝试以下4大步骤，定能搞定

1.先删除node_modules文件夹
rm -rf node_modules
2.清理npm缓存
npm cache clean --force
3.单独安装失败的npm（这是一步到位的办法。当然也可省略该步骤，直接跳到步骤4----不建议省略）
npm i xx
4.安装剩余的npm
npm i

注意：

请谨慎手动删除package-lock.json文件，然后npm i操作，虽然该方法能解决绝大多数npm i安装失败问题，但会造成npm依赖树错误，尤其是多人协作开发时，会出现测试环境运行正常，打包上线后不能工作的问题尽可能的不用cnpm，因为会漏掉很多依赖，会产生各种莫名其妙的问题8. 参考文献npm: package.json阮一峰的npm scripts 使用指南

Tags 标签