How do I install the babel-polyfill library

Question

I just started to use Babel to compile my ES6 javascript code into ES5  When I start to use Promises it looks like it s not working  The Babel website states support for promises via polyfills   Without any luck  I tried to add   require  babel polyfill      or  import   as p from  babel polyfill     With that I ll get the following error on my app bootstrapping      Cannot find module  babel polyfill    I searched for the module but it seems I m missing some fundamental thing here  I also tried to add the old and good bluebird NPM but it looks like it s not working   How to use the polyfills from Babel

User · Answer

First off  the obvious answer that no one has provided  you need to install Babel into your application   npm install babel --save    or babel-core if you instead want to require  babel-core polyfill      Aside from that  I have a grunt task to transpile my es6 and jsx as a build step  i e  I don t want to use babel register  which is why I am trying to use babel polyfill directly in the first place   so I d like to put more emphasis on this part of  ssube s answer      Make sure you require it at the entry-point to your application    before anything else is called   I ran into some weird issue where I was trying to require babel polyfill from some shared environment startup file and I got the error the user referenced - I think it might have had something to do with how babel orders imports versus requires but I m unable to reproduce now  Anyway  moving import  babel polyfill  as the first line in both my client and server startup scripts fixed the problem   Note that if you instead want to use require  babel polyfill   I would make sure all your other module loader statements are also requires and not use imports - avoid mixing the two  In other words  if you have any import statements in your startup script  make import babel polyfill the first line in your script rather than require  babel polyfill

User · Answer

The Babel docs describe this pretty concisely      Babel includes a polyfill that includes a custom regenerator runtime   and core js       This will emulate a full ES6 environment  This polyfill is   automatically loaded when using babel-node and babel register    Make sure you require it at the entry-point to your application  before anything else is called  If you re using a tool like webpack  that becomes pretty simple  you can tell webpack to include it in the bundle    If you re using a tool like gulp-babel or babel-loader  you need to also install the babel package itself to use the polyfill   Also note that for modules that affect the global scope  polyfills and the like   you can use a terse import to avoid having unused variables in your module   import  babel polyfill

User · Answer

If your package json looks something like the following            devDependencies          babel     6 5 2        babel-eslint     6 0 4        babel-polyfill     6 8 0        babel-preset-es2015     6 6 0        babelify     7 3 0           And you get the Cannot find module  babel polyfill  error message  then you probably just need to change your import statement FROM   import  babel polyfill     TO   import  babel-polyfill     And make sure it comes before any other import statement  not necessarily at the entry point of your application    Reference   https   babeljs io docs usage polyfill

User · Answer

For Babel version 7  if your are using  babel preset-env  to include polyfill all you have to do is add a flag  useBuiltIns  with the value of  usage  in your babel configuration  There is no need to require or import polyfill at the entry point of your App   With this flag specified  babel 7 will optimize and only include the polyfills you needs     To use this flag  after installation   npm install --save-dev   babel core  babel cli  babel preset-env npm install --save  babel polyfill   Simply add the flag   useBuiltIns   usage     to your babel configuration file called  babel config js   also new to Babel 7   under the   babel env  section      file  babel config js  module exports        gt       const presets                        babel env                             targets       your targeted browser                    useBuiltIns   usage       lt -----------------    add this                              return   presets         Reference    usage polyfill babel-polyfill usage-in-node-browserify-webpack babel-preset-env usebuiltins     Update Aug 2019   With the release of Babel 7 4 0  March 19  2019   babel polyfill is deprecated  Instead of installing  babe polyfill  you will install core-js   npm install --save core-js 3   A new entry corejs is added to your babel config js     file  babel config js  module exports        gt       const presets                        babel env                             targets       your targeted browser                    useBuiltIns   usage                corejs  3      lt ----- specify version of corejs used                              return   presets         see example  https   github com ApolloTang stackoverflow-eg--babel-v7 4 0-polyfill-w-core-v3  Reference     7 4 0 Released  core-js 3  static private methods and partial application  core-js 3  babel and a look into the future

User · Answer

Like Babel says in the docs  for Babel  gt  7 4 0 the module  babel polyfill is deprecated  so it s recommended to use directly core-js and regenerator-runtime libraries that before were included in  babel polyfill  So this worked for me  npm install --save core-js 3 6 5 npm install regenerator-runtime  then add to the very top of your initial js file  import  core-js stable   import  regenerator-runtime runtime

User · Answer

babel-polyfill allows you to use the full set of ES6 features beyond   syntax changes  This includes features such as new built-in objects   like Promises and WeakMap  as well as new static methods like   Array from or Object assign       Without babel-polyfill  babel only allows you to use features like   arrow functions  destructuring  default arguments  and other   syntax-specific features introduced in ES6    https   www quora com What-does-babel-polyfill-do  https   hackernoon com polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423

User · Answer

This changed a bit in babel v6   From the docs      The polyfill will emulate a full ES6 environment  This polyfill is automatically loaded when using babel-node    Installation    npm install babel-polyfill  Usage in Node   Browserify   Webpack  To include the polyfill you need to require it at the top of the entry point to your application  require  babel-polyfill     Usage in Browser  Available from the dist polyfill js file within a babel-polyfill npm release  This needs to be included before all your compiled Babel code  You can either prepend it to your compiled code or include it in a  lt script gt  before it   NOTE  Do not require this via browserify etc  use babel-polyfill

[javascript] How do I install the babel-polyfill library?

Examples related to javascript

Examples related to node.js

Examples related to babeljs

Examples related to polyfills

Examples related to babel-polyfill