记录一次两年前的Vue项目升级 |
您所在的位置：网站首页 › vue升级到指定版本 › 记录一次两年前的Vue项目升级 |
记录一次两年前的Vue项目升级
|
前段时间接受了一个旧项目,也不算旧 ,项目一直在做,但是没有人去做依赖升级.一直使用老版本两三年.接手后总是莫名其妙的问题出现,搞的心态都崩了,在熟悉了一段时间后,慢慢采用最保守的组件写法 . 完成此次需求. 趁着提前做完了功能, 测试bug也差不多改好了, 离发布还有一段时间,就想着拉一个新的复制版本,在本地做一次升级 . 记录一下此次依赖升级遇到的问题及解决方法. 当前该项目时vue项目,没有使用vue-cli 脚手架 . 这里采用逐步升级策略,优先主要依赖升级. npm版本我本地当前的npm版本: $ npm -v 7.19.1 vue 版本升级项目中版本为v2.5.2 , 我们升级到vue2最新版本v2.6.14 有大版本 , 保持更新是很有必要的,一些潜在的问题的修复、新特性等 . $ npm update vue一上来就报错了 😢 错误大意是当前的[email protected] 版本和组件库uxcool(公司内部的) 依赖echart@3.* 有冲突,需要解决. 好,既然有问题,那就根据提示解决这个问题 .
这里涉及到npm安装依赖的规则.先不做过深的说明(🐶 我也不懂) . 至少可以看到这与升级vue版本并没有关系,直接采用安装指定版本方式,避开更新时依赖冲突检测 $ npm install [email protected]没有报错,package.json 中版本已为最新,项目启动也没有什么问题. webpack 升级项目中webpack 版本v3.6.0 , 升级到稳定版本webpack4v4.46.0 $ npm install [email protected]存在依赖冲突, extract-text-webpack-plugin、html-webpack-plugin、webpack-dev-server 依赖的是webpack3 ,安装时会报错,先卸载这几个包,之后再重新安装. $ npm remove extract-text-webpack-plugin html-webpack-plugin webpack-dev-server不知道哪些包会影响webpack的安装,就直接install 根据错误提示,剔除影响的依赖包. 安装成功后,依次安装之前写在的依赖. webpack-dev-server 升级当前版本为v2.9.1 ,升级到最新为v3.11.2 $ npm install webpack-dev-server --save-dev启动npm run dev 无法启动,需要安装webpack-cli 和webpack配合使用. webpack-cli提供了一些开发中常用的默认配置以及命令. $ npm install --save-dev webpack-cli重新启动时,报错 , 说是找不到模块webpack-cli/bin/config-yargs
我才用了第二种,修改package.json { "scripts": { - "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", + "dev": "webpack serve --inline --progress --config build/webpack.dev.conf.js", }, }好了,启动没有报错了. extract-text-webpack-plugin 升级这个依赖的作用用于将多个文件中的内容提取到一个单独的文件中. 在这个项目中,它的作用用于分离组件中的css,将多个组件中的css样式打包成一个文件,从而减少静态资源的请求数量. 因为要升级到webpack4 , 官方建议使用mini-css-extract-plugin 那就修改webpack部分配置.卸载它,安装 mini-css-extract-plugin ,最新版本为v2.1.0 安装时报错,需要webpackv5.0.0 所以指定版本 v1.6.2 $ npm install --save-dev [email protected]肯定是有一些优点的 , 只有在生产环境下处理CSS的拆分: 异步加载更易使用不会重复编译只处理CSS修改配置文件,全局搜索使用了该组件的地方,进行修改: // const ExtractTextPlugin = require('extract-text-webpack-plugin') const MiniCssExtractPlugin = require("mini-css-extract-plugin") module.exports = { // ... plugins: [ - new ExtractTextPlugin({ - filename: utils.assetsPath('css/[name].css?v=' + utils.staticVersion()), - }), new MiniCssExtractPlugin({ filename: utils.assetsPath('css/[name].css?v=' + utils.staticVersion()), chunkFilename: 'css/[id].css', }), ] }处理loader 配置, extract-text-webpack-plugin 配置loader // 工具类处理多个环境下的规则定义 util.js // ... 省略其他代码 if (options.extract) { - return ExtractTextPlugin.extract({ - use: loaders, - fallback: 'vue-style-loader' - }) + return [MiniCssExtractPlugin.loader].concat(loaders) } else { return ['vue-style-loader'].concat(loaders) } html-webpack-plugin 升级当前项目中版本为v2.30.1 升级到webpack4的版本v4.5.2 $ npm i --save-dev html-webpack-plugin@4部分需要调整的配置 , 用于生产编译时的配置: module.exports = { plugins: [ new HtmlWebpackPlugin({ // ... minify: { // removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, - chunksSortMode: 'dependency', + chunksSortMode: 'auto', // 可选值更改为 none auto manual }), ] } 废弃的webpack plugin webpack.NamedModulesPlugin() 标识模块,方便调试new webpack.NoEmitOnErrorsPlugin() 有错误时 , 不会生成错误的包.new webpack.optimize.ModuleConcatenationPlugin() 预编译模块 - 生产配置现在改用配置项: module.exports = { optimization: { noEmitOnErrors: true, namedModules: true, concatenateModules:true, } } vue-loader 升级处理完webpack相关的依赖项之后,启动项目,正常编译. 进度到最后报错
当前项目版本为v13.3.0 , 升级到v14.2.4 $ npm install --save-dev [email protected]重新启动,启动成功, babel 升级包括babel-loader \ babel-core \ babel-preset-env , 移除旧的依赖包 安装新的依赖包: babel-loader@babel/core@babel/preset-env # remove $ npm remove babel-loader babel-core babel-preset-env # add $ npm install babel-loader @babel/core @babel/preset-env --save-dev安装完成之后,修改webpack.base.config.js module.exports = { module: { rules: [ { test: /\.js$/, - loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')], + use:{ + loader:'babel-loader', + options:{ + presets:[ + ['@babel/preset-env', { targets: "defaults" }] + ] + } + } }, ] } }启动后报错 , 我们已经卸载了babel-preset-env 安装了@babel/preset-env. 但babel-loader` 的依赖并没有读取到了.
需要修改.babelrc 文件 如下, 解决之前的问题. { "presets": [ - ["env", { + ["@babel/preset-env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie |
然后开始找解决方案, 最后查到是由于webpack-cli 版本更新的问题, 也在github 的issue 里看到这个问题的解决方案.
【本文地址】
今日新闻 |
推荐新闻 |