javascript - 如何阻止 babel 将 'this' 转换为 'undefined'(并插入 "use strict")

Question

编辑:这与粗箭头无关。这也不是将 this 传递给 IIFE。这是一个与转译器相关的问题。

所以我为我正在开发的一个小应用程序创建了一个简单的发布-订阅。我用 ES6 编写它以使用 spread/rest 并避免一些麻烦。我使用 npm 和 gulp 对其进行了设置以转译它，但这让我发疯了。

我把它变成了一个浏览器库，但意识到它可以在任何地方使用，所以我决定让它与 Commonjs 和 AMD 兼容。

这是我的代码的精简版:

(function(root, factory) {
 if(typeof define === 'function' && define.amd) {
    define([], function() {
        return (root.simplePubSub = factory())
    });
  } else if(typeof module === 'object' && module.exports) {
    module.exports = (root.simplePubSub = factory())
  } else {
    root.simplePubSub = root.SPS = factory()
  }
}(this, function() {
 // return SimplePubSub
});

但无论我尝试什么(例如将 this 设为变量并传递它)，它都会将其设置为 undefined。

}(undefined, function() {

这可能与 Babel 不知道 this 是什么并将其转译有关，但我可以采取任何其他方法吗？

更新:传递 }((window || module || {}), function() { 而不是 this 似乎有效.不过我不确定这是最好的方法。

Answer 1

对于 Babel >= 7.x

ES6代码有两种处理方式:

• “脚本”- 当您通过 <script> 加载文件时，或任何其他加载文件的标准 ES5 方式
• "module"- 当文件作为 ES6 模块处理时

在 Babel 7.x 中，文件默认被解析为“模块”。给你带来麻烦的是在 ES6 模块中，this是undefined ，而在 "script"情况下，这取决于环境，例如 window在浏览器脚本中或 exports在 CommonJS 代码中。同样，"module"文件是自动严格的，所以 Babel 会插入 "use strict"; .

在 Babel 7 中，如果你想避免这种行为，你需要告诉 Babel 你的文件是什么类型。最简单的选择是使用 "sourceType" 选项设置 sourceType: "unambiguous"在你的 Babel 选项中，它基本上告诉 Babel 根据 import 的存在来猜测类型(脚本与模块)和 export声明。主要的缺点是拥有一个不使用 import 的 ES6 模块在技术上是可以的。或 export , 而那些将被错误地视为脚本。另一方面，这并不常见。

或者，您可以使用 Babel 7 的 "overrides" 将特定文件设置为脚本的选项，例如

overrides: [{
  test: "./vendor/something.umd.js",
  sourceType: "script",
}],

这两种方法都允许 Babel 知道一些文件是 script类型，因此不应该有 this转换为 undefined .

对于 Babel < 7.x

ES6代码有两种处理方式:

• “脚本”- 当您通过 <script> 加载文件时，或任何其他加载文件的标准 ES5 方式
• "module"- 当文件作为 ES6 模块处理时

当使用 Babel 6 和 babel-preset-es2015 时(或 Babel 5)，Babel 默认假定它处理的文件是 ES6 模块。给你带来麻烦的是在 ES6 模块中，this是undefined和文件都是严格的，而在“脚本”的情况下，this因环境而异，如 window在浏览器脚本中或 exports在 CommonJS 代码中。

如果您使用的是 Babel，最简单的选择是在不使用 UMD 包装器的情况下编写代码，然后使用 Browserify 之类的工具捆绑您的文件，以自动为您添加 UMD 包装器。 Babel 还提供了一个 babel-plugin-transform-es2015-modules-umd .两者都以简单为目标，因此如果您想要定制的 UMD 方法，它们可能不适合您。

或者，您需要在 babel-preset-es2015 中明确列出所有 Babel 插件。 , 确保排除模块处理 babel-plugin-transform-es2015-modules-commonjs插入。请注意，这也会停止自动添加 use strict因为那也是 ES6 规范的一部分，你可能想加回去 babel-plugin-transform-strict-mode自动保持你的代码严格。

截至babel-core@6.13预设可以选择，所以你也可以做

{
  "presets": [
    [ "es2015", { "modules": false } ]
  ]
}

在你的 Babel 配置 ( .babelrc ) 中使用 babel-preset-es2015禁用模块处理。