《实战：如何使用Vue2.0开发一个npm组件库》- 6、Vue2.x 组件 webpack3 升 webpack5

升级

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. 安装相关插件

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

3. 安装 webpack5

npm install webpack@5.89.0 webpack-cli@5.1.4 -D

4. 安装

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

5. 修改文件 .npmrc

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

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

"scripts": {
	"build": "webpack --config ./webpack.config.js --progress"
},

7. 修改文件 .babelrc

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

启动报错

VueLoaderPlugin is not a constructor。

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

const { VueLoaderPlugin } = require('vue-loader')

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

The code generator has deoptimised the styling

**解决方案：**在项目根目录下查找文件 .babelrc 或 babel.config.js ，如果没有就创建一个（两者其一即可），配置如下：

// .babelrc:
{
  "compact": false
}

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

Missing class properties transform

**解决方案：**在文件 .babelrc或babel.config.js` 下配置

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

Uncaught ReferenceError: Cannot access ‘l’ before initialization

解决方案： 在文件 .babelrc 或 babel.config.js ，webpack.config.js 下配置

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

插件 xlsx 报错

**解决方案：**如下方式引入

import * as XLSX from "xlsx";

Can’t resolve ‘[object Module]’

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

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

编译报错

Uncaught ReferenceError: exports is not defined

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

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

// 合并导出
if (process.env.NODE_ENV === 'production') {
    Object.assign(exports, { MyTestComponents }, { MyDirectives });
}

export {
    MyTestComponents,
    MyDirectives
}

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

**解决方案：**未解决，把小图片改为 base64 配置；