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

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

package-lock.json 文件的作用

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

(2)package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
"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进行下载

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2021 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :