vue项目中 commonJS转es6

背景：项目中需要使用一个插件，但是插件底层是commonJS语法

项目结构：webpack+vue2.x

转换准备工作

• 安装插件：

以下插件如已安装请忽略
npm install @babel/preset-env @vue/cli-plugin-babel/preset @babel/plugin-transform-runtime
1
2

• 配置项目文件

vue.config.js

module.exports = defineConfig({
  chainWebpack: config => {
    // 添加Babel Loader配置
    config.module
      .rule('js')
      .exclude.add(/node_modules/)
      .end()
      .use('babel-loader')
      .loader('babel-loader')
  	  .tap(options => {
        // 修改Babel配置
        options.presets = [['@babel/preset-env', { modules: false }]];
        return options;
      });
  },
}）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

babel.config.js

module.exports = {
  presets: ['@babel/preset-env', '@vue/cli-plugin-babel/preset'],
  plugins: ['@babel/plugin-transform-runtime']
}
1
2
3
4

以上办法只是本人开发过程中使用的解决办法，不一定对所有人都会有帮助，有哪些地方写的不足或有问题，欢迎指正