Goodbye, Babel – preset – 2015

I guess many of you are like me, preset is ES2015 every time you use Babel.

However, just recently, if you install Babel-Preset – ES2015 again

npm install --save-dev babel-preset-es2015
Copy the code

You’ll find the following Deprecated warning (the text is hilarious) :

[email protected]: We’re super 😸 excited that you’re trying to use ES2015 syntax, but instead of making more yearly presets 😭, Babel now has a better preset that we recommend you use instead: npm install babel-preset-env –save-dev. preset-env without options will compile ES2015+ down to ES5 just like using all the presets together and thus is more future proof. It also allows you to target specific browsers so that Babel can do Less work and you can ship native ES2015+ to user 😎! We are also in the process of releasing v7, so please give
http://babeljs.io/blog/2017/09/ 12 / planning – for – 7.0 a read and help test it out in beta! Thanks so much for using Babel 🙏, please give us a follow on Twitter @babeljs for news on Babel, join
http://slack.babeljs.io for discussion/development and help support the project
at opencollective.com/babel

Yes, we’re finally saying goodbye to ES2015 Preset in Q3 2017.

So you might ask are we moving to ES2017? This is not the case, babel-Preset – ES2017 just adds a few features and ES2015 still needs to be installed. Well, let’s not keep it in suspense, the answer is —

Hello, Babel – preset – env

The Babel website announced in September that ES20xx presets such as ES2015 / ES2016/ ES2017 have been deprecated and replaced with Babel-preset -env, And it promises to be a “future-proof” solution.

In the past, Babel would
babel-preset-es2015On the
babel/babelIs maintained in the main warehouse, while babel-preset-env is
Independent as a level 1 projectThis, to some extent, shows how serious Babel is about this preset and its longer-term planning.

How to transfer

To save you reading time, LET me give you a simple version of how to upgrade:

First uninstall the original preset, and then install babel-preset-env:

npm uninstall --save-dev babel-preset-es2015
npm install --save-dev babel-preset-env
Copy the code

Next change “env” to “es2015” in your.babelrc file:

{
  "presets": [ "env" ],
  ...
}
Copy the code

Well, congratulations, it’s as simple as that, you can keep up to date with ES2015+!

further

The official description of babel-Preset states that this is an “automatic” preset that determines which plug-ins and polyfills are loaded, and since it’s called “env”, the developer must decide what runtime environment the build target is in.

The targets options

Targets specifies the browser type and version to be compatible with (using ai/browserslist query syntax) :

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}
Copy the code

In other words, you can reduce the amount of plug-in and polyfill code by specifying a higher browser version, and use the new features of native ES6 directly, especially for Electron and mobile apps or those Intranet applications that already have a browser specified. For example, if you Set your browser to a higher version of Chrome, built-in classes like Promise, Map, and Set will not be polyfilled, while new syntaxes like class will not be translated by Babel and V8’s built-in ES6 classes will be used instead.

If you are developing node.js applications, you can also specify the Node version:

{" presets ": [[" env" {" targets ": {" node" : "6.10"}}]]}Copy the code

For convenience, you can also write “node”: “current”, which will automatically adopt the version of Node.js you are currently using to run Babel.


You can also specify the Targets option.

Targets currently supports almost all major runtime environments, including Internet Explorer, Chrome, Firefox, Opera, Edge, Safari, iOS Safari, Android, Node and Electron.

Option modules

This option is the same as in the past, used to specify the modularity mode, support AMD, UMD, SystemJS, CommonJS, etc. Of course, in the Webpack 2/3 era, it is recommended to set modules to false, i.e. let Webpack handle modularity, and its TreeShaking feature will effectively reduce the size of packaged JS files:

{
  "presets": [
    ["env", {
      modules: false,
      ...
    }]
  ]
}
Copy the code

Since Webpack 2, Native Import support has been automatically enabled, so no additional Webpack setup is required. Please refer to my other answer for details
Henry Li: ECMAScript 6 modules compare to CommonJS require (…) What are the advantages?

UseBuiltIns option with Polyfill

This is an option for Polyfill, which I personally think is the biggest convenience after the migration. Of course, you still need to install babel-Polyfill in the first place (yes, you no longer need the extra transform).

npm install babel-polyfill --save
Copy the code

When useBuiltIns is set to Usage, Babel automatically adds babel-Polyfill references, partial references, when you use ES2015+ new features.

Such as:

const promise = new Promise(a);
const map = new Map(a);
Copy the code

Would be translated as:

import "babel-polyfill/core-js/modules/es6.map";
import "babel-polyfill/core-js/modules/es6.promise";

var promise = new Promise(a);
var map = new Map(a);
Copy the code

Many people used to introduce babel-Polyfill in vendor at one time. In the past, this would result in the entire Babel-Polyfill package being packaged into vendor, which would lose flexibility while making development easier. Now you can set useBuiltIns to Entry and Babel will optimize it automatically:

Such as:

Vendor. Js:

import 'babel-polyfill';
Copy the code

Index. Js:

const promise = new Promise(a);
const map = new Map(a);
Copy the code

Vendor.js will eventually be translated as:

import "babel-polyfill/core-js/modules/es6.map";
import "babel-polyfill/core-js/modules/es6.promise";
Copy the code

How’s that？ Is it super intelligent?

Goodbye, Babel – preset – es2015

Now, it’s safe to say goodbye to Babel-Preset -es2015.

Babel-preset -env is currently being actively updated, for more babel-preset-env options see Babel /babel-preset-env.

About the column

If you enjoyed this article, check out my front End Zero Stack column, where we talk about front-end technology and front-end engineering.

Since the opening of the column “Front-end Zero stack”, I have published two articles successively. It is very fortunate that these two articles were selected and recommended by friends in the weekly. Welcome guan to continue to note my front-end zero stack – Zhihu column.

About the author

Henry works in Alibaba Nanjing R&D Center. He started to learn computer programming at the age of 10 and won the first prize of Jiangsu Youth Information Olympics in the summer vacation of his second year in high school. In 2000, I began to learn JavaScript and webpage making by myself. Since 2006, I have been working on front-end development for more than 10 years. Prior to joining Alibaba, He worked as intelligent transportation Big Data Product Manager at SAP China Research Institute.

Github: MagicCube (Henry Li)