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

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

相关推荐
swipe4 分钟前
从 0 到 1 实现大文件上传:分片、秒传、断点续传、暂停、重试与服务端合并
前端·javascript·面试
kyriewen2 小时前
AI 生成的代码能跑就行?这 5 个坑迟早炸
前端·javascript·ai编程
kisshyshy2 小时前
🍦 雪糕、食堂、火车厢:三幅漫画吃透栈、队列与链表
javascript·算法
胡志辉2 小时前
从v8源码和react深入浅出理解 JavaScript 作用域链与闭包
前端·javascript
Bolt3 小时前
TypeScript 7.0 来了:当 tsc 用 Go 重写之后
javascript·typescript·go
阳火锅4 小时前
😭测试小姐姐终于不骂我了!这个提BUG神器太香了...
前端·javascript·面试
行者全栈架构师6 小时前
UniApp集成vk-uview-ui组件库详解:打造高效UI开发体验
前端·vue.js
林希_Rachel_傻希希6 小时前
js里面的proxy理解。以及vue3响应式数据设计底层
前端·javascript·面试
阿黎梨梨6 小时前
AI Loop:告别“人肉写提示词”,让代码替你“鞭策”AI
javascript·人工智能
Csvn8 小时前
Vue 3 defineModel 翻车实录:多个 v-model 绑定到底怎么写?
前端·vue.js