vue项目中 commonJS转es6

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

项目结构:webpack+vue2.x

转换准备工作

  • 安装插件:

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

  • 配置项目文件

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;
      });
  },
})

babel.config.js

复制代码
module.exports = {
  presets: ['@babel/preset-env', '@vue/cli-plugin-babel/preset'],
  plugins: ['@babel/plugin-transform-runtime']
}

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

相关推荐
摘星编程17 小时前
用React Native开发OpenHarmony应用:timing定时动画参数
javascript·react native·react.js
JosieBook17 小时前
【Vue】12 Vue技术—— Vue 事件修饰符详解:掌握事件处理的高级技巧
前端·javascript·vue.js
摘星编程17 小时前
在OpenHarmony上用React Native实现AnimatedValue补间动画
javascript·react native·react.js
摘星编程18 小时前
React Native鸿蒙版:AnimatedXY双轴动画完整代码
javascript·react native·react.js
艾斯特_18 小时前
Echarts常用配置项及解释
前端·javascript·echarts
m0_5027249518 小时前
飞书真机调试
开发语言·前端·javascript
刘一说19 小时前
Vue3 模块语法革命:移除过滤器(Filters)的深度解析与迁移指南
前端·vue.js·js
lkbhua莱克瓦2420 小时前
JavaScript核心语法
开发语言·前端·javascript·笔记·html·ecmascript·javaweb
Trae1ounG20 小时前
这是什么dom
前端·javascript·vue.js
比老马还六20 小时前
Bipes项目二次开发/扩展积木功能(八)
前端·javascript