javascript - Babel - 导出 es 模块时的不同转译结果
问题描述
假设我有两个 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 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
and的局部变量moduleB
,但是由于您的示例代码无论如何都不会尝试使用这些导入的变量,因此输出没有区别。
推荐阅读
- opencv - 级联训练的背景大小
- c# - 如何使用 Visual Studio 2017 正确发布 Nuget
- javascript - 自定义截断函数删除所有初始文本
- opendata - 我们可以将 Web 应用程序连接到 ONA ODK 表单吗?
- sql - 选择需要很长时间
- javascript - 在 JavaScript 的类型文件中声明接口
- javascript - TypeScript 中的数据范围
- python - BeautifulSoup - 无法获取页面的内容
- java - Hibernate 线程中是否有 CUD 操作安全?
- python - 时间序列获取本月最后一个需要的日期并重复它