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

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

相关推荐
lichenyang45329 分钟前
虚拟 DOM、Diff 算法与 Fiber
前端·javascript·面试
angerdream1 小时前
最新版vue3+TypeScript开发入门到实战教程之学会vue3第一步必是setup语法糖
前端·vue.js
angerdream1 小时前
最新版vue3+TypeScript开发入门到实战教程之学会vue3真正的响应式数据
javascript·vue.js
angerdream1 小时前
最新版vue3+TypeScript开发入门到实战教程之ref与reactive的实战区别用法
前端·vue.js
zhengxianyi5151 小时前
ruo-vue-pro 启用任务调度模块并新增一个job
java·vue.js·spring boot
全栈老石2 小时前
再见 Moment.js!浏览器原生支持的新一代时间库 Temporal 来了
前端·javascript
叫我一声阿雷吧2 小时前
JS 入门通关手册(13):DOM 基础入门:用 JavaScript 操作网页元素,让页面 “活” 起来!
javascript·dom操作·js入门·零基础学前端·网页交互
我命由我123452 小时前
React - React 初识、创建虚拟 DOM 的两种方式、jsx 语法规则、React 定义组件
前端·javascript·react.js·前端框架·html·html5·js
青青家的小灰灰2 小时前
深入理解 JavaScript 箭头函数:从语法糖到核心机制
前端·javascript·面试
敲代码的约德尔人2 小时前
我在 3 个项目中踩坑后,才真正理解了 JavaScript 设计模式
前端·javascript