Babel ES6模块:为什么babel重命名进口

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).