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']
}

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

相关推荐
计算机编程-吉哥9 分钟前
计算机毕业设计 基于 SpringBoot + Vue 的剧本杀系统 Java毕业设计【任务书、开题报告、中期报告、论文、源码】
java·vue.js·spring boot·毕业设计·课程设计·计算机毕业设计选题
这里是杨杨吖13 分钟前
SpringCloud+Vue民宿房屋租赁系统 附带详细运行指导视频
vue.js·spring boot·spring cloud·房屋·民宿租赁
2601_949970691 小时前
msgpackr 跨端三方库仓颉适配全流程
前端·javascript·flutter
数智奔流1 小时前
MiniMax的低价攻势,撞上“背题”疑云
前端·javascript·算法
某人辛木2 小时前
Web前端框架应用(三)路由
前端·javascript·前端框架
小大宇12 小时前
Vue知识点6-computed计算属性
前端·javascript·vue.js
程序员海军13 小时前
尤雨溪 : Vue 4 已经在规划中了!
前端·javascript·vue.js
2601_9499706913 小时前
HumanizeDuration 跨端三方库仓颉适配全流程
前端·javascript·flutter
天外飞雨道沧桑15 小时前
我在浏览器里练了一个 792 参数的大模型,它学会了补全 JavaScript
开发语言·javascript·ai·ecmascript·ai编程
鶴哥只手遮天16 小时前
jQuery 4.0 源码架构与工程实践-第 01 章 · 全景与工程结构:一个 20 岁库的自省
前端·javascript·jquery