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

大佬教程收集整理的这篇文章主要介绍了如何阻止babel将“ this”转换为“ undefined”（并插入“ use strict”），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何阻止babel将“ this”转换为“ undefined”（并插入“ use Strict”）？

对于Babel> = 7.x

ES6代码有两种处理方式：

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

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

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

另外，您可以使用Babel 7的"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插件。注意，这也将停止自动添加，use Strict因为这也是ES6规范的一部分，您可能需要添加回去babel-plugin- transform-Strict-mode以自动严格执行代码。

由于babel-core@6.13预设可以接受选项，因此您也可以

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

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

解决方法

(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() {