nodeJS版本升级
所有项目：nodeJS version v12 -> v16
本机版本：nodeJS v16.13.2, npm v8.1.2
若出现：
RESOLVE unable to resolve dependency tree ix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps，直接运行npm install --force清除npm缓存：
npm cache clean -f切换更高级的版本后，出现依赖报错，例如：
bashZ:\projects\aaa+4818\quality-app-web>npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: sitir-quality-web@0.2.0 npm ERR! Found: eslint-plugin-vue@8.7.1 npm ERR! node_modules/eslint-plugin-vue npm ERR! dev eslint-plugin-vue@"^8.6.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0 npm ERR! node_modules/@vue/eslint-config-standard npm ERR! dev @vue/eslint-config-standard@"^6.1.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17package.json// 问题根源在于各个依赖包的依赖版本互不兼容，导致的错误，上述问题是： // @vue/eslint-config-standard@6.1.0这个依赖包依赖于eslint-plugin-vue@"^7.0.0" // 但是，项目中安装的依赖确是eslint-plugin-vue@"^8.6.0" // 所以出现了错误 // 解决方法，为某个不兼容的依赖（eslint-plugin-vue）添加一个依赖范围，使得各个依赖于它的包都能正常运转 // origin "eslint-plugin-vue": "^8.6.0", // now "eslint-plugin-vue": "^7.0.0 || ^8.6.0",1
2
3
4
5
6
7
8
9
10
11为项目限定特定的node版本（理论上其他内容也可以限定，比如系统）[1]
json
// 限定node及npm版本
"engines": {
"node": "^16.0.0",
"npm": "^8.0.0"
}1
2
3
4
5
2
3
4
5
npmrc
# 设置严格的engine字段
# 之后安装依赖会报错
engine-strict = true1
2
3
2
3
web端项目(vue-cli创建的项目)
- 修改
package.json文件，升级依赖包 - 修改
vue.config.js文件 - 修改
babel.config.js文件 - 还有项目中其他为适应升级所作的代码修改...
json
"dependencies": {
# 新增：用于解决运行过程中，控制台报错：Uncaught ReferenceError: regeneratorRuntime is not defined
"@babel/plugin-transform-runtime": "^7.17.0"
},
"devDependencies": {
# 新增
# webpack升级需增加的（webpack5），其他版本不需要
"node-polyfill-webpack-plugin": "^1.1.4",
# babel：适应es6+语法，比如?? ?.
"@babel/cli": "^7.17.6",
"@babel/core": "^7.17.9",
"@babel/eslint-parser": "^7.17.0",
"@babel/preset-env": "^7.16.11",
# 代码压缩
"terser-webpack-plugin": "^4.2.3",
"webpack": "^5.0.0"
# 升级
"@vue/eslint-config-standard": "^5.1.2" -> "^6.0.0",
"compression-webpack-plugin": "^3.0.0" -> "^6.0.0",
"eslint": "^6.7.2" -> "^7.0.0",
"eslint-plugin-promise": "^4.2.1" -> "^6.0.0",
"eslint-plugin-vue": "^6.2.2" -> "^8.0.0",
# vue-cli从4升级到5，下面依赖同步升级
"@vue/cli-plugin-babel": "^5.0.4",
"@vue/cli-plugin-eslint": "^5.0.4",
"@vue/cli-plugin-router": "^5.0.4",
"@vue/cli-service": "^5.0.4",
# 删除
"babel-eslint": "^10.1.0",
"uglifyjs-webpack-plugin": "^2.2.0",
},
"parserOptions": {
"parser": "babel-eslint" -> "@babel/eslint-parser"
},
"rules": {
"indent": "off",
# 新增，组件未设置驼峰的name
"vue/multi-word-component-names": "off"
}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
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
javascript
// 解决webpack < 5的报错（此项先不操作）
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
// 更换压缩代码插件
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const TerserPlugin = require("terser-webpack-plugin")
// 为了解决警告：DefinePlugin Conflicting values for 'process.env.NODE_ENV'，实际上无效果，在mode test情况下会出现，唯一变通方法，删除使用其他关键词代替test
const webpack = require('webpack')
module.exports = {
// 分环境，本地开发，必须使用/，不然history模式下，单独访问404，打包服务器访问，必须使用./
publicPath: IS_PROD ? './' : '/',
configureWebpack: config => {
config.plugins.push(
// ...
new CompressionPlugin({
// 修改filename规则，之前：'[path].gz[query]'
filename: '[name][path][base].gz',
}),
// 目前无效果，只能不用 --mode test这个了
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
// 解决webpack < 5的报错（此项先不操作）
new NodePolyfillPlugin()
)
},
chainWebpack: config => {
// 同步升级更新完vue-cli后，必须去除node modules和package-lock.json文件，不然报错：UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer('js')
.use(require.resolve('terser-webpack-plugin'), [{
parallel: true,
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log'],
},
format: {
comments: false,
}
},
extractComments: false
}])
} else {
config.optimization.minimize(false)
}
},
devServer: {
// 删除以下三个
disableHostCheck: true,
hotOnly: false,
inline: true,
}
}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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
javascript
presets: [
// 修改，原来是：'@vue/cli-plugin-babel/preset'
"@babel/preset-env"
],
plugins: [
// 新增：用于解决运行过程中，控制台报错：Uncaught ReferenceError: regeneratorRuntime is not defined
"@babel/plugin-transform-runtime"
]1
2
3
4
5
6
7
8
2
3
4
5
6
7
8