Karma, PhantomJS and es6 Promises

Question

我正在编写一个使用新的es6 promises的JavaScript库。在Firefox浏览器中可以测试该库，因为Promise已经被定义了。但是当我尝试使用Karma和PhantomJS测试我的代码时，会出现错误无法找到变量：Promise。我猜想这是因为PhantomJS浏览器还不支持es6 promises。

我该如何配置Karma引入promise的polyfill呢？

- Travis Parks

Answer 1

您可以通过安装Babel Polyfill来引入Babel polyfill：

npm install --save-dev babel-polyfill

然后在karma.conf.js的files部分中，将多填充文件包含在您的源代码和测试文件之前：

files: [
  'node_modules/babel-polyfill/dist/polyfill.js',
  'index.js',   //could be /src/**/*.js
  'index.spec.js' //could be /test/**/*.spec.js
],

除非您知道所有目标浏览器都支持Promises，否则您可能也希望将此polyfill应用于发布的构建中。

如果您感到非常有冒险精神，可以使用Browserify将文件引入以使测试更加模块化，然后使用Babelify将ES6转译为ES5。我已创建了一个包含这些内容和涉及Promise的工作测试（在PhantomJS2上运行）的示例项目，供参考。

- spikeheap

---

我遇到了类似的问题，但在包含polyfill后，Promise似乎永远不会解决，这是一个要点：https://gist.github.com/Kikketer/1646eccdaff76944b358 有人知道为什么Promise永远不会运行'.then'吗？ - Chris

@Chris，你的问题看起来完全不相关。我无法运行你的gist，但是看起来你的问题可能与Angular有关。不要在Angular中使用Promise polyfill-您需要使用内置的$q实现（否则它将无法与digest周期一起工作）。如果您想构建已解决的promise，请使用$q.when(some_object)。你真的需要在SO上开一个新问题，但是把链接发在这里，我会看一下。 - spikeheap

@spikeheap，是的，我在整个应用程序中切换到了$q，并且它起作用了。感谢您的关注。 - Chris

使用https://github.com/webpack/karma-webpack与babel，并在karma.conf.js中拥有其配置部分以及`proprocessor：{'./tests/**/*.js'，：['webpack']}`不应该足够吗？为什么在webpack正常情况下添加polyfill时，我还需要手动添加它呢？ - Henrik

嗨@Henrik，听起来你已经回答了自己的问题;）。这个问题/答案对于那些不使用Webpack的大量人来说是有用的，但你是对的：如果你正在使用一个已经为你进行polyfill的系统，不要手动添加一个polyfill。 - spikeheap

我使用promise-polyfill解决了相同的问题：https://www.npmjs.com/package/promise-polyfill - Axel Meier

Answer 2

在 Babel 6 中，我们需要安装 babel-polyfill 来支持 Promise。

npm install --save-dev babel-polyfill

并且在 karma.conf.js 的 files 部分添加一行代码。

files: [
  'node_modules/babel-polyfill/dist/polyfill.js',
  ....
]

这在https://github.com/babel/karma-babel-preprocessor#polyfill有详细的文档记录。

- gasolin

Answer 3

正如作者所指出的那样，它无法识别ES6 Promise。为了加载它，可以借助Webpack.ProvidePlugin来加载ES6 Promise模块，并将其配置在Webpack的插件数组中。

plugins: [
        new webpack.ProvidePlugin({
            'Promise': 'es6-promise'
        })
    ]

这对我来说似乎有效！

- Manit

Answer 4

对于使用ES6特性的文件，您可以使用karma-babel-preprocessor。通过以下命令进行安装：

npm install --save-dev karma-babel-preprocessor

然后在karma.conf中指定需要预处理的文件：

preprocessors: {
      "src/**/*.js": ["babel"],
      "test/**/*.js": ["babel"]
    },

- SET001

---

很遗憾，这不起作用。我已经在使用babel-preprocessor，但Karma找不到Promise.resolve()函数。 babel-polyfill为我解决了这个问题。 - Jelle den Burger

Answer 5

这个线程应该会对你有所帮助。根据它的内容，似乎你应该尝试使用带有ES6的PhantomJS2。 你也可以看看这个项目，它与你的主题非常接近。

希望能帮到你。

- Tony

---

快速测试表明，PhantomJS 2.0.1-dev不支持Promises。 - Artjom B.