Babel ES6 模块：为什么 babel 重命名导入

Question

当运行 babel over my ES6 imports 它通过我的源重命名我的导入：

import {foo as bar} from './bar';
console.log(bar);

变成

'use strict';
var _bar = require('./bar');
console.log(_bar.foo);

命名导入重命名自：

import {bar} from './bar';
console.log(bar);

至

'use strict';
var _bar = require('./bar');
console.log(_bar.bar);

默认导入更糟，因为还添加了 2:

import bar from './bar';
console.log(bar);

变成

'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _bar = require('./bar');
var _bar2 = _interopRequireDefault(_bar);
console.log(_bar2['default']);

为什么 babel 这样做？背景：在 Chrome 中调试应用程序时，我需要转到源文件以找出变量如何重命名以获取其当前值，因为 Chrome 不知道 bar已重命名为 _bar.bar ...这使得使用 WebStorm 等工具进行调试几乎不可能...

为什么 babel 不能将命名导入转换为

'use strict';
var _bar = require('./bar');
var bar = _bar.bar;
console.log(bar);

并且默认导入到

'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _bar = require('./bar');
var _bar2 = _interopRequireDefault(_bar);
var bar = _bar2['default']
console.log(bar);

Answer 1

这样做是为了模拟 "reference" 模块导入的性质。在

import {foo as bar} from './bar';
console.log(bar);

bar 不仅仅是一个保存值的变量，它是从另一个模块导出的 reference。如果导出值发生变化，导入值也会发生变化。

示例：

// a.js
export var a = 42;
setTimeout(() => a = 21, 500);

// b.js
import {a} from './a';
setTimeout(() => console.log(a), 1000);

根据规范，b.js 中的代码必须记录 21。由于 JavaScript 没有 按引用分配 ，实现这种行为的唯一方法是将每个导入转换为 MemberExpression (foo.bar)。

Babel ES6 模块：为什么 babel 重命名导入

Babel ES6 Modules: Why is babel renaming imports

ecmascript-6

babeljs