babel这东西真的很难用,需要配置的地方很多。比如@babel/plugin-transform-runtime要专门进行配置,babel默认是用内联的辅助函数(inline Babel helpers)。而且经常配不成功,这不,又出问题了。
我们看代码:
function includes(target, wanted) {
for(const element of target) if(wanted === element) return true;
return false;
}
期望编译后:
import _createForOfIteratorHelperLoose from "@babel/runtime/helpers/esm/createForOfIteratorHelperLoose";
function includes(target, wanted) {
for (
var _iterator = _createForOfIteratorHelperLoose(target), _step;
!(_step = _iterator()).done;
) {
var element = _step.value;
if (wanted === element) return true;
}
return false;
}
实际编译后:
function _createForOfIteratorHelperLoose(){
//......
}
function includes(target, wanted) {
for (
var _iterator = _createForOfIteratorHelperLoose(target), _step;
!(_step = _iterator()).done;
) {
var element = _step.value;
if (wanted === element) return true;
}
return false;
}
发现没有效果。
你们帮我看看我的配置有没有问题
{
plugins: [
["@babel/plugin-transform-runtime", {
absoluteRuntime: false,
corejs: false,
helpers: true,
regenerator: true,
useESModules: true
}],
]
}
检查了许久,查看了很多资料,都没有发现问题。
最后发现:
是_createForOfIteratorHelperLoose这个helper函数默认配置不走@babel/plugin-transform-runtime。别的helper函数正常。
调试@babel/plugin-transform-runtime的源代码。
发现176这个if在_createForOfIteratorHelperLoose和别的helper函数不同。
进入一看,这是一个版本号校验函数
原来,是没有配置version造成的。
version需要根据你安装的@babel/runtime版本进行配置,@babel/plugin-transform-runtime不会自动获取,@babel/plugin-transform-runtime默认你安装的是7.0.0。
修改后
var babelRuntimePath = require.resolve("@babel/runtime/package.json", {
paths: [process.cwd()]
});
var babelRuntimePackage = require(babelRuntimePath);
var babelRuntimeVersion = babelRuntimePackage.version;
["@babel/plugin-transform-runtime", {
absoluteRuntime: false,
corejs: false,
helpers: true,
regenerator: true,
useESModules: true,
version: babelRuntimeVersion
}],