How do you use es6 promises today on frontend?

Question

I'm trying to use babel to compile file that contains es6 promises. I have installed babel-cli, babel-preset-es2015, babel-plugin-es6-promise.

My .babelrc config is:

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

I got compiled js file with require() inside, but i don't want to use require at all.

Is there any possibility of using es6 promises today on frontend side without require js?

Please provide any link to es6 promises implementation sample with babel (or even with babel + require because i can't get require js working as well)

ps: Don't wan't to use webpack.

Answer 1

Is there any possibility of using es6 promises today on frontend side without require js?

In the latest Chrome/Firefox/Safari/Edge, Promises are already supported natively.

If you're looking for an older browser support as well, an easy way without Babel is to just use a polyfill library.

Here are libraries that have the exact behavior specified by the spec:

• es6-promise
• Native Promises Only

And here are some with additional customized behavior:

• BlueBird
• Q

Of course, the above are just some more popular ones but there are many others you can find by researching.

If you do want to use other ES6 features, and especially on older browsers, you could keep adding polyfills but at that point it might be easier and more future-oriented to just use Babel and its env preset.

---

Please provide any link to es6 promises implementation sample with babel (or even with babel + require because i can't get require js working as well)

The babel website's setup describes how to use it in basically any environment you can think of. If webpack is too heavy for your needs, I'd recommend using gulp and here's a thorough guide on how

Answer 2

Babel itself is just a transpiler, it translates from ES6 to ES5, and nothing else. Since ES6 includes modules, which can be used for imports like:

import Awesome from './Awesome'

Babel will transpile that into require statements for you, but not care about the actual requiring. Therefore you need any framework that implements the AMD style require, like Browserify or something like that. Webpack will also handle that for, so if you use Webpack + Babel, all the required code will be available and there is nothing in your way to use ES6 modules (and Promises, too) via the new import statement.

I am using a webpack.config.js like that:

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'
    }]
  }
}

and a .babelrc like that:

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

Before I started to use Webpack, I used Gulp and browserify, to first compile and than to bundle, but the setup with webpack is much simpler, so I decided to use that…