如何阻止babel从“this”到“undefined”
编辑 :这不是关于脂肪箭头 。 这也不是传递给一个IIFE 。 这是一个翻译相关的问题。
所以我为我正在开发的一个小应用程序创build了一个简单的pub-sub。 我写在ES6使用传播/rest和保存一些头痛。 我用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 });
但是不pipe我尝试什么(比如把它作为一个variables并传递它),它将它设置为undefined 。
}(undefined, function() {
这可能跟巴别尔不知道会发生什么,并把它转移开来,但还有其他办法吗?
更新 :传递}((window || module || {}), function() {
而不是这似乎工作。
ES6代码有两种处理模式:
- “脚本” – 通过
<script>
或任何其他标准加载文件的方式加载文件 - “模块” – 文件作为ES6模块处理时
当使用Babel 6和babel-preset-es2015
(或Babel 5)时,Babel默认默认处理的文件是ES6模块。 引起麻烦的是在ES6模块中, this
是undefined
,而在“脚本”情况下, this
取决于环境,例如浏览器脚本中的window
或CommonJS代码中的exports
。
如果您使用的是Babel,最简单的select是在不使用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-preset-es2015-webpack
或者babel-preset-es2015-script
,这两个babel-preset-es2015-script
都是es2015
没有包含transform-es2015-modules-commonjs
。
作为babel-core@6.13
预设可以select,所以你也可以做
{ "presets": [ [ "es2015", { "modules": false } ] ] }
在您的Babelconfiguration文件( .babelrc
)中使用禁用模块处理的babel-preset-es2015
。
默认情况下,“es2015”预设会将“Babel”输出包装在commonJs包装中。 使用“babel-preset-es2015-script”(你必须首先npm install --save babel-preset-es2015-script
)输出“script”(无模块)。 这对我正在使用巴别塔的其他图书馆造成严重破坏。
预设: https : //www.npmjs.com/package/babel-preset-es2015-script