《Webpack5 升级》- Vue2.x 组件库 Webpack3 升 5

前言

基于 Vue2.x 的项目和组件库开发于 2019 年 ,那时对 Webpack 版本没有概念,项目和组件库的版本混乱...有的使用 v3,有的使用 v4...

对于现今 2023 年(或 2024 年)的整个生态环境是不够用的,无法使用较新和更优秀的插件。所以升级势在必行
注意 本篇是基于 Vue2.x 组件库 的升级,如果想了解 基于 Vue2.x 项目 的升级。

请移步《Vue2.x 项目 Webpack 4 升级 5(半自动升级)》

实现

升级

  1. package.json 删除冗余依赖

    "extract-text-webpack-plugin": "^3.0.2",

    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-glob-entry": "^2.1.1"

    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",

    "file-loader": "^1.1.6",

  2. 安装相关插件

bash 复制代码
npm i vue@2.6.14

npm i vue-template-compiler@2.6.14 -D
npm i vue-loader@15.9.8 -D
npm i file-loader@6.2.0 -D
npm i babel-loader@8.3.0 -D


npm i @babel/core@7.2.2 -D
npm i @babel/plugin-transform-runtime@7.22.5 -D
npm i @babel/preset-env@7.3.1 -D
npm i @babel/preset-react@7 -D
npm i @vue/cli-plugin-babel@5.0.6 -D
npm i @vue/cli-service@5.0.6 -D
        
npm i axios@1.6.0

注意千万不要安装,这是给vue3和vue2的兼任版本使用

@vue/compiler-sfc
  1. 安装 webpack5
bash 复制代码
npm install webpack@5.89.0 webpack-cli@5.1.4 -D
  1. 安装

    npm i mini-css-extract-plugin -D
    npm i css-minimizer-webpack-plugin -D
    npm i javascript-obfuscator webpack-obfuscator -D
    npm i style-loader@2 -D

  2. 修改文件 .npmrc

    init.author.name 改为 --init-author-name
    init.author.email 改为 --init-author-email

  3. 修改文件 packages.json 的编译命令

json 复制代码
"scripts": {
	"build": "webpack --config ./webpack.config.js --progress"
},
  1. 修改文件 .babelrc
json 复制代码
{ 
  "presets":[
    [
      "@babel/preset-env",
      { "targets": "> 1% in AU and not dead", "shippedProposals": true },
    ],
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

启动时报错

错误 1: VueLoaderPlugin is not a constructor

解决方案: vue-loader 必须在 15+,且在 webpack.config.js做如下配置:

js 复制代码
const { VueLoaderPlugin } = require('vue-loader')

plugins: [
    // 引入VueLoader插件
    new VueLoaderPlugin(),
],

错误 2: The code generator has deoptimised the styling

解决方案: 在项目根目录下查找文件 .babelrcbabel.config.js ,如果没有就创建一个(两者其一即可),配置如下:

js 复制代码
// .babelrc:
{
  "compact": false
}

// babel.config.js:
module.exports = {
    compact: false,
}

错误 3: Missing class properties transform

解决方案: 在文件 .babelrcbabel.config.js` 下配置

json 复制代码
{ 
  "presets":[
    [
      "@babel/preset-env",
      { "targets": "> 1% in AU and not dead", "shippedProposals": true },
    ],
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

错误 4: Uncaught ReferenceError: Cannot access 'l' before initialization

解决方案: 在文件 .babelrcbabel.config.jswebpack.config.js 下配置

json 复制代码
// .babel 或 babel.config.js
"plugins": [
    "@babel/plugin-transform-runtime"
]
  
// webpack.config.js
module.exports = {
  target: ['web', 'es5'],
}

错误 5: 插件 xlsx 报错

解决方案: 如下方式引入

import * as XLSX from "xlsx";

错误 6: Can't resolve '[object Module]

解决方案: 字体库报错,属于资源配置错误。 文件 webpack.config.js 中配置

json 复制代码
{
    test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
    type: "asset/resource", // 正确
    // loader: "file-loader"// 错误
},

编译时报错

错误 1: Uncaught ReferenceError: exports is not defined

解决方案: 第三方参考,也可研究 babel-loader。没真正解决,因为仅在开发联调环境下报此错误。

组件库文件 index.js 导出组件,要判断当前环境是否为 production

js 复制代码
// 合并导出
if (process.env.NODE_ENV === 'production') {
    Object.assign(exports, { MyTestComponents });
}

export {
    MyTestComponents 
}

错误 2: 使用相对路径引用的图片解析后的地址不正确

解决方案: 未解决,把小图片改为 base64 配置(待研究);

项目版本是 Webpack4,但使用 Webpack5 组件库的解决方案

vue.config.js 加上如下代码第 2 行:

json 复制代码
module.exports = {    
    productionSourceMap: false,
    // 你的组件库名称
    transpileDependencies: ['my-components-test'],
}

最后

想要了解更多,请查看官网 《从 v4 升级到 v5》

相关推荐
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
栈老师不回家3 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙3 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
小远yyds3 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果4 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长4 小时前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
guai_guai_guai4 小时前
uniapp
前端·javascript·vue.js·uni-app
王哲晓6 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js