Babel - 导出 es 模块时的不同转译结果答案

【问题标题】：Babel - Different transpilation results when exporting es modulesBabel - 导出 es 模块时的不同转译结果
【发布时间】：2018-09-07 13:49:39
【问题描述】：

假设我有两个 es 模块 myModule/A 和 myModule/B，我想将它们导出到我的 myModule/index 文件中.我必须这样做：

- 方法 A：

// myModule/index.es
import moduleA from './A';
import moduleB from './B';
export { moduleA, moduleB };

Babel 将编译如下代码：

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.moduleB = exports.moduleA = undefined;

var _A = require('./A');

var _A2 = _interopRequireDefault(_A);

var _B = require('./B');

var _B2 = _interopRequireDefault(_B);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.moduleA = _A2.default;
exports.moduleB = _B2.default;

- 方法 B：

// myModule/index.es
export { default as moduleA } from './A';
export { default as moduleB } from './B';

Babel 将编译如下代码：

'use strict';

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

var _A = require('./A');

Object.defineProperty(exports, 'moduleA', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_A).default;
  }
});

var _B = require('./B');

Object.defineProperty(exports, 'moduleB', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_B).default;
  }
});

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

谁能解释为什么我们有不同的结果？谢谢！

【问题讨论】：

我无法评论 Babel 或者它是否正确反映了 ES6 语义，但主要区别在于方法 A 将在模块中引入 moduleA 和 moduleB 作为局部变量，而方法 B不会。

标签： javascript ecmascript-6 babeljs es6-modules

【解决方案1】：

它们是不同的结果，因为 Babel 6 在编译这些案例方面做得不好。在 Babel 7.x 中，模块转换插件从头开始重写，两个示例产生相同的输出，如

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "moduleA", {
  enumerable: true,
  get: function get() {
    return _A.default;
  }
});
Object.defineProperty(exports, "moduleB", {
  enumerable: true,
  get: function get() {
    return _B.default;
  }
});

var _A = _interopRequireDefault(require("./A"));

var _B = _interopRequireDefault(require("./B"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

正如Bergi 所指出的，两者之间唯一的功能区别是第一个将创建名为moduleA 和moduleB 的局部变量，但由于您的示例代码无论如何都不会尝试使用这些导入的变量，所以有输出没有区别。

【讨论】：