Babel-导出es模块时的不同翻译结果

时间:2018-09-07 13:49:39

标签: javascript ecmascript-6 babeljs es6-modules

假设我有两个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 }; }


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

1 个答案:

答案 0 :(得分:3)

结果不同,因为Babel 6在汇编这些案例时做得很差。在Babel 7.x中,模块转换插件是从头开始重写的,两个示例产生的输出与此相同,如下所示:

ProductTypeTable
Id
FilterOptions <--- json from above gets store in here.

正如Bergi所指出的,两者之间的唯一功能区别是,第一个将创建名为"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 }; } moduleA的局部变量,但是由于示例代码从不尝试使用那些局部变量无论如何导入变量,输出都没有差异。