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

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

相关推荐
向上的车轮13 分钟前
Next.js 入门指南:从零到一构建全栈应用
开发语言·javascript·ecmascript
freeinlife'15 分钟前
精准秒表计时器实现---基于js
开发语言·前端·javascript
MaCa .BaKa25 分钟前
55-宠物爱心救助领养系统-宠物救助领养系统
java·vue.js·tomcat·maven·springboot·宠物救助领养系统
优雅格子衫1 小时前
uniapp 拍照相册选取后超级好用的裁剪组件,增加水印完全自定义
开发语言·前端·javascript·uni-app·vue
AI砖家1 小时前
前端 JavaScript 异步处理全方案详解:从回调到 Observable
开发语言·前端·javascript
柒和远方1 小时前
每日一学V010: 从 Python 回到前端:一个 AI Native 开发者的 JavaScript 底层基础补全
javascript
之歆1 小时前
Day21_电商详情页核心技术实战:从LESS预处理到复杂交互实现
开发语言·前端·javascript·css·交互·less
海鸥两三2 小时前
基于 Vue 3 + 高德地图的网格规划系统实战(有源码)
前端·javascript·vue.js
逸A2 小时前
某里v2反混淆 codec 化路上踩到的两个隐蔽坑:被清零的 salt 与 opaque loop bound
javascript·人工智能·目标跟踪
丷丩2 小时前
MapLibre GL JS第11课:获取鼠标指针坐标
前端·javascript·gis·地图·mapbox·maplibre gl js