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

标签 javascript ecmascript-6 babeljs es6-modules

假设我有两个 es 模块 myModule/AmyModule/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 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 所指出的,两者之间唯一的功能区别是,第一个将创建名为 moduleAmoduleB 的局部变量,但由于您的示例代码无论如何都不会尝试使用这些导入的变量,因此输出没有区别。

关于javascript - Babel - 导出 es 模块时的不同转译结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52223950/

相关文章:

javascript - 如何使用 CORS 飞行前请求处理自定义 header ? AJAX-代码点火器

javascript - 通过 Webpack 导入 Module 中的图片

javascript - 如何在 zip 下载开始后压缩 Node js 应用程序中的文件夹?

javascript - CKEditor + 插件链接选择框

javascript - react : How to Show Message if there is no records

javascript - 我缺少哪些 Babelify 预设/插件来解析这段代码?

javascript - 生成器和 babel-node

reactjs - 为 IE 10/11 转译 NextJS; 'Weakset undefined'

node.js - React/Babelify 新手;如何修复 "Accessing PropTypes"警告

javascript - 从 GoogleMaps 客户端响应中获取 Google Place Photo 的 URL