背景:项目中需要使用一个插件,但是插件底层是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']
}
以上办法只是本人开发过程中使用的解决办法,不一定对所有人都会有帮助,有哪些地方写的不足或有问题,欢迎指正