巴贝尔有趣的导入

Question

由于我所知道的浏览器当前没有实现ES6模块接口 - 但是转发器也是如此 - 我用这个简单的例子测试了babel

import { getUsefulContents } from "file.js";
getUsefulContents("http://www.example.com", data => {
  doSomethingUseful(data);
  });

我只想看看它是如何改变这些界限的.令我惊讶的是它产生了以下输出:

"use strict";

var _fileJs = require("file.js");

(0, _fileJs.getUsefulContents)("http://www.example.com", function (data) {
  doSomethingUseful(data);
});

最后一行看起来很神秘 - 尤其是那(0, _fileJs.getUsefulContents)部分,那里发生了什么？(0, ...)那条线上的目的是什么？

Answer 1

调用这样的函数会强制它在全局上下文中调用它.

function whoAmI() {
  document.querySelector('pre').innerText += this.name + '\n';
}
window.name = 'window';
var mike = {
  name: 'mike',
  whoAmI: whoAmI
};
mike.whoAmI();
(0, mike.whoAmI)();

<pre></pre>

这是有效的原因是因为它在评估时(0, filesJs)会遍历括号中的每个语句,类似于如何使用a声明多个变量,

var a = 1,
    b = 2,
    ...

由于最后一个表达式是对函数的引用,因此在使用下一组括号计算函数调用时使用它.由于表达式已被评估,因此_filesJs上下文丢失了.它实际上与执行此操作相同:

0; // Legal, just pointless
var f = _filesJs.getUsefulContents;
f("http://example.com", ...);