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

对于Babel> = 7.x

ES6代码有两种处理方式：

• “脚本”-通过

  <script>

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

在Babel
7.x中，默认情况下将文件解析为“模块”。造成您麻烦的是，在ES6模块中，

this

是

undefined

，而在这种

"script"

情况下，这取决于环境，例如

window

在浏览器脚本或

exports

CommonJS代码中。同样，

"module"

文件是自动严格的，因此Babel将插入

"usestrict";

。

在Babel
7中，如果要避免这种行为，您需要告诉Babel文件的类型。最简单的选项是使用该

"sourceType"

选项

sourceType:"unambiguous"

在您的Babel 选项中进行设置，这实际上告诉Babel基于

import

and

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加载文件的方式加载文件时
• “模块”-将文件作为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

以禁用模块处理。