Babel 的有趣导入

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) 时，它会遍历括号中的每个语句，类似于使用 ,

声明多个变量的方式

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

由于最后一个表达式是对函数的引用，因此在使用下一组括号评估函数调用时使用它。由于表达式已经被评估， _filesJs 上下文丢失了。它实际上与这样做相同：

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

Babel 的有趣导入

Babel's funny import

javascript

babeljs