小编典典

如何阻止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() {而不是
似乎可行。我不确定这是否是最好的方法。


阅读 570

收藏
2020-05-01

共1个答案

小编典典

对于Babel> = 7.x

ES6代码有两种处理方式:

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

在Babel7.x中,默认情况下将文件解析为“模块”。引起您麻烦的是,在ES6模块中,thisundefined,而在这种"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模块中,thisundefined和文件都是严格的,而在“脚本”的情况下,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