你今天如何在前端使用 es6 Promise？答案

【问题标题】：How do you use es6 promises today on frontend?你今天如何在前端使用 es6 Promise？
【发布时间】：2017-01-03 01:35:00
【问题描述】：

我正在尝试使用 babel 编译包含 es6 承诺的文件。我已经安装了 babel-cli、babel-preset-es2015、babel-plugin-es6-promise。

我的 .babelrc 配置是：

{
  "presets": ["es2015"],
  "plugins": ["es6-promise"]
}

我得到了带有 require() 的编译 js 文件，但我根本不想使用 require。

现在有没有可能在前端使用 es6 承诺而不需要 js？

请提供任何指向带有 babel 的 es6 Promise 实现示例的链接（甚至使用 babel + require，因为我无法让 require js 正常工作）

ps: 不想用 webpack。

【问题讨论】：

如果你只想使用 es6-promise 而不是 es6 语法，那么你可以像使用任何其他 promise 库一样使用这个 polyfill github.com/stefanpenner/es6-promise。但如果你想要webpack 的替代品，那么你可能想试试rollup 或browserify。

标签： javascript ecmascript-6 es6-promise

【解决方案1】：

现在有没有可能在前端使用 es6 Promise 而不需要 js？

在最新的 Chrome/Firefox/Safari/Edge 中，Promise 为 already supported natively。

如果您也在寻找旧版浏览器支持，那么不使用 Babel 的简单方法就是使用 polyfill 库。

以下是具有规范指定的确切行为的库：

以下是一些带有额外自定义行为的：

BlueBird
Q

当然，以上只是一些比较流行的，但还有很多其他的，你可以通过研究找到。

如果您确实想使用其他 ES6 功能，尤其是在较旧的浏览器上，您可以继续添加 polyfill，但此时仅使用 Babel 及其 env preset 可能会更容易且更面向未来。

请提供任何指向带有 babel 的 es6 Promise 实现示例的链接（甚至使用 babel + require，因为我无法让 require js 正常工作）

babel website's setup 描述了如何在您能想到的任何环境中使用它。如果webpack 对您的需求来说太重了，我推荐using gulp，这里是thorough guide on how

【讨论】：

【解决方案2】：

Babel 本身只是一个转译器，它将 ES6 转换为 ES5，仅此而已。由于 ES6 包含模块，因此可用于以下导入：

import Awesome from './Awesome'

Babel 会为您将其转换为 require 语句，但不关心实际要求。因此，您需要任何实现 AMD 风格要求的框架，例如 Browserify 或类似的东西。 Webpack 也会处理这个问题，所以如果你使用 Webpack + Babel，所有必需的代码都将可用，并且通过新的 import 语句使用 ES6 模块（和 Promises，也一样）没有任何障碍。

我正在使用这样的webpack.config.js：

module.exports = {
    entry: ['babel-polyfill', './js/main.js'],
    output: {
        path: './bin/js',
        filename: 'main.js',
    },

    devtool: 'source-map',

    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
    }]
  }
}

还有这样的.babelrc：

{ 
    "presets": [ "es2015", "stage-3" ],
    "plugins": [
        "external-helpers",
        "transform-async-to-generator",
        "transform-runtime"
    ]
}

在我开始使用 Webpack 之前，我使用 Gulp 和 browserify，先编译然后打包，但是使用 webpack 的设置要简单得多，所以我决定使用它……

【讨论】：

【解决方案3】：

Webpack + babel - 用于前端。 node.js 5+ 版本/babel-register for node.js

【讨论】：