编辑 :这 与肥箭无关 。这也是不是通过 这 一个 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() {而不是 这 似乎可行。我不确定这是否是最好的方法。
}((window || module || {}), function() {
ES6代码有两种处理方式:
<script>
在Babel7.x中,默认情况下将文件解析为“模块”。引起您麻烦的是,在ES6模块中,this是undefined,而在这种"script"情况下,这取决于环境,例如window在浏览器脚本或exportsCommonJS代码中。同样,"module"文件是自动严格的,因此Babel将插入"usestrict";。
this
undefined
"script"
window
exports
"module"
"usestrict";
在Babel7中,如果要避免这种行为,您需要告诉Babel文件的类型。最简单的选项是使用该"sourceType"选项sourceType: "unambiguous"在您的Babel 选项中进行设置,这实际上是告诉Babel基于importandexport语句的存在来猜测类型(脚本与模块)。主要的缺点是,在技术上可以使用不使用import或的ES6模块export,而这些模块会被错误地视为脚本。另一方面,这实际上并不常见。
"sourceType"
sourceType: "unambiguous"
import
export
另外,您可以使用Babel7的"overrides"选项将特定文件设置为脚本,例如
"overrides"
overrides: [{ test: "./vendor/something.umd.js", sourceType: "script", }],
两种方法都可以使Babel知道某些文件是script类型,因此不应该将其this转换为undefined。
script
当使用Babel 6和babel-preset-es2015(或Babel 5)时,Babel默认情况下假定其处理的文件是ES6模块。也就是造成你麻烦的事情是,一个ES6模块中,this是undefined和文件都是严格的,而在“脚本”的情况下,this取决于环境,比如window在浏览器脚本或exports在CommonJS的代码。
babel-preset-es2015
如果您使用的是Babel,最简单的选择是在不使用UMD包装器的情况下编写代码,然后使用Browserify之类的文件捆绑文件以自动为您添加UMD包装器。Babel还提供了一个babel- plugin-transform-es2015-modules-umd。两者都旨在简化,因此,如果您想要定制的UMD方法,则可能不适合您。
babel- plugin-transform-es2015-modules-umd
或者,您需要在babel-preset-es2015中显式列出所有Babel插件,并确保排除模块处理babel-plugin-transform-es2015-modules-commonjs插件。注意,这也将停止自动添加,usestrict因为这也是ES6规范的一部分,您可能需要添加回去babel-plugin-transform-strict-mode以自动严格执行代码。
babel-plugin-transform-es2015-modules-commonjs
usestrict
babel-plugin-transform-strict-mode
从babel-core@6.13预设开始就可以选择选项,因此您也可以
babel-core@6.13
{ "presets": [ [ "es2015", { "modules": false } ] ] }
在您的Babel配置(.babelrc)中使用,babel-preset-es2015以禁用模块处理。
.babelrc