ecmascript-6 - Babel ES6 模块 : Why is babel renaming imports

Question

当在我的 ES6 导入上运行 babel 时，它通过我的源重命名我的导入:

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

这样做是为了模拟模块导入的“引用”性质。在

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

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

例子:

// 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)。