项目中babel使用

235 阅读1分钟

@babel/plugin-transform-runtime

先执行下面两条命令安装两个库:

yarn add @babel/plugin-transform-runtime -D

yarn add @babel/runtime-corejs3

其中 @babel/plugin-transform-runtime 的作用是转译代码,转译后的代码中可能会引入 @babel/runtime-corejs3 里面的模块。所以前者运行在编译时,后者运行在运行时。类似 polyfill,后者需要被打包到最终产物里在浏览器中运行。

"presets": [
[
"@babel/preset-env"
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3 // 指定 runtime-corejs 的版本,目前有 2 3 两个版本
}
]
]
}


zhuanlan.zhihu.com/p/147083132

babel-plugin-transform-remove-console

npm install babel-plugin-transform-remove-console --save-dev

此插件删除所有 console.* 调用

babel的配置文件: image.png

可以解决下面这种项目编译过程报错

image.png

babel-plugin-import

在编译过程中将import的写法自动转换成按需引入的方式.

npm install babel-plugin-import --save-dev

image.png

vue报错regeneratorRuntime is not defined

在使用babel编译es6时,遇到报错Uncaught ReferenceError: regeneratorRuntime is not defined问题

原因

脚本使用了ES7的 async/await regeneratorRuntime在浏览器上是不认识的,需要安装@babel/plugin-transform-runtime插件

解决方案

npm install @babel/plugin-transform-runtime

在babel.config.js中添加 plugins:['@babel/plugin-transform-runtime']