Preface
The company's project is built using vue-cli4 . Recently, a dependency needs to be installed. Then this dependency is normal when running serve. After packaging, it is normal to click once, but an error is reported when clicking again. After careful investigation later, I found out that it was a webpack version problem.
vue-cli4 installs webpack4 , and vue-cli5 installs webpack5 . Installing this dependency package in vue-cli5 will not have this problem.
So the next step is to upgrade vue-cli4 to vue-cli5. Because it is a cross-version upgrade, many writing methods and usage are different, which is so refreshing, so summarizing this process can be regarded as reviewing the past and learning the new.
text
We first upgrade the global dependencies of vue-cli.
I use yarn, as follows
js复制代码// npm
npm update -g @vue/cli
// yarn
yarn global upgrade --latest @vue/cli
The upgrade is successful, print vue -V to view the latest version.
Then you can use vue upgrade to upgrade the project's cli dependencies (starting with @vue/cli-plugin- or vue-cli-plugin-).
Then install the corresponding dependencies, and the upgrade will be successful.
But do you think it will be fine?
node-polyfill-webpack-plugin
webpack4 will automatically introduce the core modules of node, such as path , process , os , etc. However, webpack5 has been upgraded and will not be introduced automatically. It needs to be introduced manually.
So if your dependencies have references, an error will be reported when packaging.
We can install a dependency to solve this problem, node-polyfill-webpack-plugin.
It can automatically introduce the core module of node and configure it in vue.config.js.
js复制代码 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
// ...省略部分配置
configureWebpack: {
plugins: [
new NodePolyfillPlugin()
]
},
webpack custom plugin
We previously wrote a webpack custom plug-in in the project, and then after upgrading vue-cli5, a packaging error was reported.
js复制代码 // vue.config.js
chainWebpack: (config) => {
// 自定义插件
config.plugin('customPluginName').use(require('./xx/plugins/xx/xx.js'))
},
configureWebpack: {
}
js复制代码// custom plugin.js
const path = require('path')
class VersionPlugin {
apply (compiler) {
compiler.options.entry = {
...compiler.options.entry,
version: './xxx/version.js'
}
}
}
module.exports = VersionPlugin
After checking the documentation of webpack5, I found that the entry way is richer.
It turns out that entry can be a string, a string object, or an array.
js复制代码entry: './app.js'
// or
entry: {
app: './app.js',
about: './xxx'
}
On this basis, the current webpack5 also supports fields such as import and dependOn.
js复制代码entry: {
app: {import: './app.js'},
about: {import:'./xxx', dependOn: 'xxx'}
}
After reading part of the source code of wepback, I found that if the value of your object is a string, it will splice an import field and the value is an array. as follows:
But the execution time of my custom plug-in change entry is later than this time , so if the import is not packaged, it will report an error.
Therefore, if a custom plug-in wants to change the entry, it must splice the import field to prevent errors.
js复制代码const path = require('path')
class VersionPlugin {
apply (compiler) {
compiler.options.entry = {
...compiler.options.entry,
version: { import: ['./xxx/version.js'] }
}
}
}
module.exports = VersionPlugin
copy-webpack-plugin
First, our project uses copy-webpack-plugin to copy files. vue-cli has it built in, but the versions are different.
vue-cli4 is installed with version 5.xx, and vue-cli5 is installed with version 9.xx.
js复制代码 // copy-webpack-plugin v5.x.x
plugins: [
new CopyWebpackPlugin([{
from: path.resolve(__dirname, './xx/xx/*.js'),
to: 'js/[name].[ext]'
}])
]
// copy-webpack-plugin v9.x.x
plugins: [
new CopyWebpackPlugin({
patterns: [{
from: path.resolve(__dirname, './xx/xx/*.js').replace(/\\/g, '/'),
to: 'js/[name][ext]'
}]
})
]
You can see that one of [name].[ext] has a dot in the middle and the other has no dot in the middle.
There is also a writing method with *. You need to call replace to replace \ to adapt to glob matching. (Without *, you don’t need to call replace)
eslint
If you are using eslint, the versions of eslint and eslint-plugin-vue of vue-cli5 have also been upgraded. Cross-version upgrade will cause many eslint rules to change. There were no errors before, but now errors will be reported like crazy.
For example, the name of a component cannot use a single word, nextTick cannot use await and callback at the same time, and do not assign or modify the key of the object passed in by props.
It's so refreshing to fix these 170 eslint errors.
Summarize
The above is a summary of the problems encountered when upgrading vuecli4 to 5. I recommend not to directly upgrade old projects unless absolutely necessary, otherwise there will be many bugs waiting for you to fix. It is best to use vue-cli5 in new projects.
Not to mention, I haven’t finished correcting the bugs in eslint, and I am still correcting them. . .