Prefacio
El proyecto de la empresa se construye usando vue-cli4 . Recientemente, es necesario instalar una dependencia. Entonces esta dependencia es normal cuando se ejecuta el servicio. Después del empaquetado, es normal hacer clic una vez, pero se informa un error al hacer clic nuevamente. Después de una investigación cuidadosa, descubrí que se trataba de un problema de versión del paquete web.
vue-cli4 instala webpack4 y vue-cli5 instala webpack5 . La instalación de este paquete de dependencia en vue-cli5 no tendrá este problema.
Entonces, el siguiente paso es actualizar vue-cli4 a vue-cli5. Debido a que es una actualización entre versiones, muchos métodos de escritura y uso son diferentes, lo cual es muy refrescante, por lo que resumir este proceso puede considerarse como revisar el pasado y aprender. el nuevo.
texto
Primero actualizamos las dependencias globales de vue-cli.
Yo uso hilo, de la siguiente manera.
js复制代码// npm
npm update -g @vue/cli
// yarn
yarn global upgrade --latest @vue/cli
La actualización se realizó correctamente, imprima vue -V para ver la última versión.
Luego puede usar vue update para actualizar las dependencias cli del proyecto (comenzando con @vue/cli-plugin- o vue-cli-plugin-).
Luego instale las dependencias correspondientes y la actualización se realizará correctamente.
¿Pero crees que estará bien?
nodo-polyfill-webpack-plugin
webpack4 introducirá automáticamente los módulos principales del nodo, como ruta , proceso , sistema operativo , etc. Sin embargo, webpack5 se ha actualizado y no se introducirá automáticamente, sino que debe introducirse manualmente.
Entonces, si sus dependencias tienen referencias, se informará un error al empaquetar.
Podemos instalar una dependencia para solucionar este problema, node-polyfill-webpack-plugin.
Puede introducir automáticamente el módulo principal del nodo y configurarlo en vue.config.js.
js复制代码 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
// ...省略部分配置
configureWebpack: {
plugins: [
new NodePolyfillPlugin()
]
},
complemento personalizado del paquete web
Anteriormente escribimos un complemento personalizado de paquete web en el proyecto y luego, después de actualizar vue-cli5, se informó un error de empaquetado.
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
Después de consultar la documentación de webpack5, descubrí que la forma de entrada es más rica.
Resulta que la entrada puede ser una cadena, un objeto de cadena o una matriz.
js复制代码entry: './app.js'
// or
entry: {
app: './app.js',
about: './xxx'
}
Sobre esta base, el paquete web5 actual también admite campos como importar y depender.
js复制代码entry: {
app: {import: './app.js'},
about: {import:'./xxx', dependOn: 'xxx'}
}
Después de leer parte del código fuente de wepback, descubrí que si el valor de su objeto es una cadena, unirá un campo de importación y el valor es una matriz. como sigue:
Pero el tiempo de ejecución de la entrada de cambio de mi complemento personalizado es posterior a este tiempo , por lo que si la importación no está empaquetada, informará un error.
Por lo tanto, si un complemento personalizado desea cambiar la entrada, debe unir el campo de importación para evitar errores.
js复制代码const path = require('path')
class VersionPlugin {
apply (compiler) {
compiler.options.entry = {
...compiler.options.entry,
version: { import: ['./xxx/version.js'] }
}
}
}
module.exports = VersionPlugin
copiar-webpack-plugin
Primero, nuestro proyecto usa copy-webpack-plugin para copiar archivos. Vue-cli lo tiene integrado, pero las versiones son diferentes.
vue-cli4 se instala con la versión 5.xx y vue-cli5 se instala con la versión 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]'
}]
})
]
Puedes ver que uno de [nombre].[ext] tiene un punto en el medio y el otro no tiene ningún punto en el medio.
También hay un método de escritura con *. Debe llamar a reemplazar para reemplazar \ para adaptarse a la coincidencia global. (Sin *, no es necesario llamar a reemplazar)
eslint
Si está utilizando eslint, las versiones de eslint y eslint-plugin-vue de vue-cli5 también se han actualizado. La actualización entre versiones hará que muchas reglas de eslint cambien. No había errores antes, pero ahora los errores se informarán como loco.
Por ejemplo, el nombre de un componente no puede usar una sola palabra, nextTick no puede usar await y callback al mismo tiempo, y no asigna ni modifica la clave del objeto pasado por los accesorios.
Es muy refrescante corregir estos 170 errores de eslint.
Resumir
Lo anterior es un resumen de los problemas encontrados al actualizar vuecli4 a 5. Recomiendo no actualizar directamente proyectos antiguos a menos que sea absolutamente necesario, de lo contrario habrá muchos errores esperando que los solucione. Es mejor usar vue-cli5 en proyectos nuevos. .
Sin mencionar que no he terminado de corregir los errores en eslint y todavía los estoy corrigiendo. . .