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

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

相关推荐
山河木马19 分钟前
GPU自动处理专题4-填充覆盖区域(光栅化)
javascript·webgl·计算机图形学
悦儿遥遥雨128 分钟前
PXE + Kickstart 无人值守批量部署系统
linux·javascript·nginx
清秋1 小时前
全网最全 ECMAScript 攻略( 更新至 ES2026)
前端·javascript·编程语言
Hilaku2 小时前
为什么 AI 写前端时,总是优先选择 React,而不是 Vue?
前端·javascript·程序员
不简说4 小时前
拖拽DIY表格插件来了!sv-print 七月更新:这次真的能自己拼表格了
前端·javascript·前端框架
weixin_471383034 小时前
Next.js - 04 - 深入理解next.js渲染原理
前端·javascript·next.js
ssshooter5 小时前
小程序分包页面报 "has not been registered yet" 的隐蔽根因:一个动态 import 拖垮整个分包
前端·javascript·微信小程序
鹏多多5 小时前
Web浏览器后台离线通知方案实现以及兼容指南
前端·javascript·vue.js
yangmu32035 小时前
Vue3 响应式系统深度解析:从 Proxy 到依赖追踪
前端·javascript·vue.js
Asize5 小时前
Node path 与 fs 模块:从回调地狱到 async await 的异步进化
javascript·node.js