javascript – 如何阻止babel将’this’转换为’undefined'(并插入“use strict”)

2023-08-27 19:39:04

编辑：这不是胖箭.这也不是将其传递给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> = 7.x

ES6代码有两种处理模式：

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

在Babel 7.x中,默认情况下将文件解析为“模块”.导致你麻烦的是,在ES6模块中,这是未定义的,而在“脚本”情况下,这取决于环境,例如浏览器脚本中的窗口或CommonJS代码中的导出.同样,“模块”文件是自动严格的,因此Babel将插入“use strict”;.

在Babel 7中,如果你想避免这种行为,你需要告诉Babel你的文件是什么类型的.最简单的选择是使用"sourceType"选项在您的Babel选项中设置sourceType：“unambiguous”,它基本上告诉Babel根据导入和导出语句的存在来猜测类型(脚本与模块).主要的缺点是技术上没有使用导入或导出的ES6模块,这些将被错误地视为脚本.另一方面,这真的不常见.

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

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

这两种方法都允许Babel知道某些文件是脚本类型,因此不应将其转换为undefined.

对于Babel< 7.x版 ES6代码有两种处理模式：
>“script” – 通过< script>或任何其他标准ES5加载文件的方式加载文件时
>“module” – 将文件作为ES6模块处理时

使用Babel 6和babel-preset-es2015(或Babel 5)时,Babel默认假定它处理的文件是ES6模块.导致你麻烦的是,在ES6模块中,这是未定义的,文件都是严格的,而在“脚本”情况下,这取决于环境,如浏览器脚本中的窗口或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禁用模块处理.

码农公寓

相关文章