Using babel-polyfill with grunt and browserify

Question

My grunt build system transpiles my javascript (which is using react as well). Unfortunately it doesn't transpile Promises. For that, I need a polyfill. I want to include babel-polyfill with my grunt build system. My build system uses browserify along with babelify and the es2015 preset.

How do I include babel-polyfill into the mix?

Here is what I have...

Inside gruntfile.js, here is where I use browserify

browserify: {
  dist: {
    options: {
      watch: true,
      transform: [["babelify", {presets: ['es2015', 'react']}], ["envify", {NODE_ENV: 'development'}]]
    },
    files: {
      'dist/js/app.js' : 'src/js/main.js'
    }
  },
  build: {
    options: {
      transform: [["babelify", {presets: ['es2015', 'react'], compact: true }], ["envify", {NODE_ENV: 'production'}]]
    },
    files: {
      'dist/js/app.js' : 'src/js/main.js'
    }
  }
},

Here is my babelrc file

{
 "presets": [ "react", "es2015" ]
}

Thanks!

ness-EE ness-EE · Accepted Answer · 2017-08-17T12:51:07

Assuming that babel-polyfill is included as a dependency, at the top of your entry file 'src/js/main.js' add the line:

import "babel-polyfill";

No need to do anything in your GruntFile.js

Using babel-polyfill with grunt and browserify

1 Answers