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

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

相关推荐
openKaka_1 小时前
从 scheduleUpdateOnFiber 到 Root 微任务调度:React 如何把更新交给调度系统
开发语言·前端·javascript
LIO1 小时前
一文读懂 Vue 3:核心特性、组合式 API 与最佳实践
前端·vue.js
前进的李工1 小时前
智能Agent实战指南:记忆组件嵌入技巧(记忆)
开发语言·前端·javascript·python·langchain·agent
IOT.FIVE.NO.12 小时前
Codex Skill 内部结构解析:从 SKILL.md 到 scripts、references、assets
前端·javascript·人工智能·笔记·html
daols883 小时前
vue甘特图vxe-gantt如何实现拖拽任务条时如有已关联依赖线,同时更新依赖任务的日期的方式
javascript·vue.js·甘特图
我命由我123453 小时前
前端开发概念 - 无障碍树
javascript·css·笔记·学习·html·html5·js
ZC跨境爬虫4 小时前
跟着 MDN 学 HTML day_29:(动态构建与更新 DOM 树)
前端·javascript·ui·html·html5·媒体
搜狐技术产品小编20235 小时前
深度解析与业务实战:将 screenshot-to-code 改造为支持 React + Ant Design 的前端利器
前端·javascript·react.js·前端框架·ecmascript
weixin_471383035 小时前
set和map结构,减少O(n)复杂度
前端·javascript