为什么@babel/plugin-transform-runtime没效果

原创
2022/11/15 20:40
阅读数 640

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

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部