Question

我遇到了一个问题，试图将Babel的外部助手与ES6模块一起使用，并想知道我是否正确地采用了这种方式。截至目前，我无法运行已编译的代码，如下所述，但是tl; dr版本是Babel正在将我的import和export重新排序为一个中断的订单代码，我不知道为什么会这样做。

这是一个非常简化的示例，演示了这个问题：

源/ index.js

// import babel helpers first so they are added to the global scope 
// and available to anything that needs them
import './babel-helpers';

export * from './dependency';

源/ dependency.js

const constant = 'myProp';

const a = { [constant]: 1 };
const b = { [constant]: 2 };

export { a, b };

source / babel-helpers.js （使用babel-external-helpers -l defineProperty自动生成）

(function (global) {
  var babelHelpers = global.babelHelpers = {};

  babelHelpers.defineProperty = function (obj, key, value) {
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      });
    } else {
      obj[key] = value;
    }

    return obj;
  };
})(typeof global === "undefined" ? self : global);

.babelrc

{
  "plugins": ["external-helpers"],
  "presets": ["env"]
}

使用babel source --output-dir built进行转换后，输出为：

建/ index.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _dependency = require('./dependency');

Object.keys(_dependency).forEach(function (key) {
  if (key === "default" || key === "__esModule") return;
  Object.defineProperty(exports, key, {
    enumerable: true,
    get: function get() {
      return _dependency[key];
    }
  });
});

require('./babel-helpers');

建/ dependency.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
var constant = 'myProp';

var a = babelHelpers.defineProperty({}, constant, 1);
var b = babelHelpers.defineProperty({}, constant, 2);

exports.a = a;
exports.b = b;

build / babel-helpers.js 与原版

没有任何改变

我遇到的问题是由于某种原因，已转换的import './babel-helpers'被移动到index.js的 end ，因此当我尝试运行代码时，它非常可以理解的是失败并出现错误，因为使用帮助程序的代码在添加到全局范围之前运行：

var a = babelHelpers.defineProperty({}, constant, 1);
        ^

ReferenceError: babelHelpers is not defined

如果我手动编辑已转换的index.js以将require('./babel-helpers');移动到文件的顶部，则代码运行正常。

所以我有两个问题：

为什么Babel会对import和export进行奇怪的重新排序？这看起来完全没有意义。有没有办法控制它？
我是以错误的方式来做这件事的吗？有没有更好的方法来使用外部帮助？该文档没有提供有关使用生成的帮助程序实际执行的内容的指导。将它们生成到模块中并将该模块显式地导入到最终需要它们的每个文件中都可能有效，但这似乎是一种非常谨慎的方式。当然，我的个别模块最好不要在预先编译的源代码中明确地引用它们。

我已经为这个场景创建了一个Github回购，以防有人想自己运行它：https://github.com/JLRishe/babel-helpers-e6-modules-issue

Answer 1

事实证明，进口和出口的重新排序是一个在Babel的7.x beta中修复的错误：

https://github.com/babel/babel/issues/6468

我结束了我自己的问题，一位巴贝尔团队成员回答说这是一个已知的（固定的）问题。他还提出了一些关于使用外部帮助者的建议，因为在编写库时，全局导入它们并不是一个好主意：

https://github.com/babel/babel/issues/6919

麻烦使用带有ES6模块的Babel外部帮助程序 - Babel重新排序导入/导出会中断执行顺序

1 个答案: