Vue或React项目代码相同运行出错采坑记录

现象：同一个项目，同一套代码，在别人的机器上正常运行，在自己的机器上运行报错
原因：依赖问题，如果本地没有package-lock.json或yarn.lock，package-lock.json中的^会安装对应的最新版本，依赖版本不一致导致运行不一致（参数不一致、默认值不一致等等）

package-lock.json 文件的作用

（1）同一个项目第一次cnpm install的时候还可以启动，过一段时间，把node_modules删掉，重新cnpm install，发现项目启动报错了。奇怪，项目代码和之前一样，一点都没改动。查其原因，发现是package.json文件的依赖模块版本号没有固定

（2）package.json

"dependencies": {
  "@antv/data-set": "^0.10.1",
  "@babel/runtime": "^7.3.1",
  "@vue/eslint-config-prettier": "^4.0.1",
  "antd": "^3.24.2",
  "antd-mobile": "^2.3.1",
  "bignumber.js": "^8.1.1",
  "bizcharts": "^3.4.3",
  "bizcharts-plugin-slider": "^2.1.1-beta.1",
  "classnames": "^2.2.6",
  "crypto-js": "^3.1.9-1",
  "dva": "^2.4.1",
  "enquire-js": "^0.2.1",
  "eslint-plugin-vue": "^5.2.2",
  "fs": "0.0.1-security",
  "gg-editor": "^2.0.2",
  "hash.js": "^1.1.7",
  "lodash": "^4.17.11",
  "lodash-decorators": "^6.0.1",
  "md5": "^2.2.1",
  "md5-node": "^1.0.1",
  "memoize-one": "^5.0.0",
  "moment": "^2.24.0",
  "numeral": "^2.0.6",
  "nzh": "^1.0.4",
  "omit.js": "^1.0.0",
  "path-to-regexp": "^3.0.0",
  "prop-types": "^15.6.2",
  "qr-image": "^3.2.0",
  "qs": "^6.6.0",
  "rc-animate": "^2.6.0",
  "react": "^16.7.0",
  "react-container-query": "^0.11.0",
  "react-copy-to-clipboard": "^5.0.1",
  "react-document-title": "^2.0.3",
  "react-dom": "^16.11.0",
  "react-fittext": "^1.0.0",
  "react-google-recaptcha": "^1.0.5",
  "react-media": "^1.9.2",
  "svgpath": "^2.2.2",
  "umi": "^2.4.4",
  "umi-plugin-react": "^1.7.2"
},

这里有个^，安装的时候会安装对应的最新版本，如果这期间该模块有更新，再次安装的时候版本不一样，所以项目报错了。

（3）解决办法

通过npm5之后安装文件之后会多出一个package-lock.json的文件

（4）package-lock.json文件的作用

• 安装之后锁定包的版本，手动更改package.json文件安装将不会更新包，想要更新只能使用npm install xxx@1.0.0 --save这种方式来进行版本更新package-lock.json文件才可以
• 加快了npm install的速度，因为package-lock.json文件中已经记录了整个node_modules文件夹的树状结构，甚至连模块的下载地址都记录了，再重新安装的时候只需要直接下载文件即可

（5）cnpm不支持package-lock.json

• 使用cnpm install时候，并不会生成package-lock.json文件
• cnpm install的时候，就算项目中有package-lock.json文件，cnpm也不会识别，仍会根据package.json来安装。所以这就是为什么之前你用npm安装产生了package-lock.json，后面的人用cnpm来安装，可能会跟你安装的依赖包不一致，这是因为cnpm不受package-lock.json影响，只会根据package.json进行下载