如何阻止babel将“ this”转换为“ undefined”（并插入“ use strict”）

小编典典

如何阻止babel将“ this”转换为“ undefined”（并插入“ use strict”）

javascript

编辑：这 与肥箭无关 。这也是不是通过这一个 IIFE 。这是与翻译员有关的问题。

因此，我为正在使用的小应用程序创建了一个简单的pub-
sub。我在ES6中编写了它，以使用传播/休息并节省一些麻烦。我用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
});

但是，不管我什么（如使这个变量和传递），将其设置到 未定义 。

}(undefined, function() {

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

更新：传递}((window || module || {}), function() {而不是这
似乎可行。我不确定这是否是最好的方法。

阅读 571

2020-05-01

共1个答案

小编典典

对于Babel> = 7.x

ES6代码有两种处理方式：

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

在Babel7.x中，默认情况下将文件解析为“模块”。引起您麻烦的是，在ES6模块中，this是undefined，而在这种"script"情况下，这取决于环境，例如window在浏览器脚本或exportsCommonJS代码中。同样，"module"文件是自动严格的，因此Babel将插入"usestrict";。

在Babel7中，如果要避免这种行为，您需要告诉Babel文件的类型。最简单的选项是使用该"sourceType"选项sourceType: "unambiguous"在您的Babel 选项中进行设置，这实际上是告诉Babel基于importandexport语句的存在来猜测类型（脚本与模块）。主要的缺点是，在技术上可以使用不使用import或的ES6模块export，而这些模块会被错误地视为脚本。另一方面，这实际上并不常见。

另外，您可以使用Babel7的"overrides"选项将特定文件设置为脚本，例如

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

两种方法都可以使Babel知道某些文件是script类型，因此不应该将其this转换为undefined。

对于Babel <7.x

ES6代码有两种处理方式：

“脚本”-通过<script>或任何其他标准ES5加载文件的方式加载文件时
“模块”-将文件作为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插件。注意，这也将停止自动添加，usestrict因为这也是ES6规范的一部分，您可能需要添加回去babel-plugin-transform-strict-mode以自动严格执行代码。

从babel-core@6.13预设开始就可以选择选项，因此您也可以

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

在您的Babel配置（.babelrc）中使用，babel-preset-es2015以禁用模块处理。

2020-05-01