What do you need to know when using @ babel / preset-env?

Saturday, 18/04/2020

Tram Ho

Hello everyone, package `@babel/preset-env` may many of you are familiar with it but do you really understand its power? Let's find out together today. Into the

1. Preparation

Request:

Already have basic knowledge about Babel .
The environment I will demo:
- macOS
- node v10.16.1
- yarn v1.17.3
Editor: VSCode

Purpose:

Learn more about package @babel/preset-env .
Find advantages and disadvantages to use to suit each project.

2. Content

What is Babel?

Babel is a compiler

source code → output code

1 2	source code → output code

Like other compilers it runs in 3 stages

parsing → transforming → printing

1 2	parsing → transforming → printing

Preset env

Simply put, it allows you to use the latest JavaScript syntax without worrying about compatibility with JavaScript interpreters in browsers (Of course there will be some exceptions) because it will convert into ES5 syntax (JavaScript engine can understand)
It is a collection of @babel/plugin-* , its list of plugins you can see here

For example

<span class="token comment">// .babelrc</span>
<span class="token punctuation">{</span>
  <span class="token string">"presets"</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token string">"@babel/preset-env"</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token comment">// input.js</span>
<span class="token keyword">const</span> <span class="token function-variable function">func</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Hello'</span> <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token function">func</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>

<span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'Dai'</span>
<span class="token keyword">const</span> age <span class="token operator">=</span> <span class="token string">'69'</span>
<span class="token keyword">const</span> info <span class="token operator">=</span> <span class="token template-string"><span class="token string">`name: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> Dai <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">, age: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> age <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">.`</span></span>

<span class="token comment">// output.js</span>
<span class="token string">"use strict"</span> <span class="token punctuation">;</span>

<span class="token keyword">var</span> <span class="token function-variable function">func</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">func</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Hello'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

<span class="token function">func</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">'Dai'</span> <span class="token punctuation">;</span>
<span class="token keyword">var</span> age <span class="token operator">=</span> <span class="token string">'69'</span> <span class="token punctuation">;</span>
<span class="token keyword">var</span> info <span class="token operator">=</span> <span class="token string">"name: "</span> <span class="token punctuation">.</span> <span class="token function">concat</span> <span class="token punctuation">(</span> Dai <span class="token punctuation">,</span> <span class="token string">", age: "</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">concat</span> <span class="token punctuation">(</span> age <span class="token punctuation">,</span> <span class="token string">"."</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

// .babelrc

{

"presets" : [

"@babel/preset-env"

]

}

// input.js

const func = ( ) => {

console . log ( 'Hello' )

}

func ( )

const name = 'Dai'

const age = '69'

const info = `name: ${ Dai } , age: ${ age } .`

// output.js

"use strict" ;

var func = function func ( ) {

} ;

func ( ) ;

var name = 'Dai' ;

var age = '69' ;

var info = "name: " . concat ( Dai , ", age: " ) . concat ( age , "." ) ;

Options

<span class="token comment">// .babelrc</span>
<span class="token punctuation">{</span>
  <span class="token string">"presets"</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span> <span class="token string">"@babel/preset-env"</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span>
      <span class="token string">"loose"</span> <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span>
      <span class="token string">"modules"</span> <span class="token punctuation">:</span> <span class="token boolean">false</span>
    <span class="token punctuation">}</span> <span class="token punctuation">]</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>

// .babelrc

{

"presets" : [

[ "@babel/preset-env" , {

"loose" : true ,

"modules" : false

} ]

]

}

We will go through the common options

modules

"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false , defaults to false

For example, we want to convert ES6 module syntax into commonjs module

<span class="token comment">// .babelrc</span>
<span class="token punctuation">{</span>
  <span class="token string">"presets"</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span> <span class="token string">"@babel/preset-env"</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token string">"modules"</span> <span class="token punctuation">:</span> <span class="token string">"commonjs"</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token comment">// input.js</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> func1 <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./input2'</span>

<span class="token keyword">function</span> <span class="token function">main</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'start'</span> <span class="token punctuation">)</span>
  <span class="token function">func1</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
  console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'end'</span> <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// output.js</span>
<span class="token string">"use strict"</span> <span class="token punctuation">;</span>

<span class="token keyword">var</span> _input <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">"./input2"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">main</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'start'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token punctuation">,</span> _input <span class="token punctuation">.</span> func1 <span class="token punctuation">)</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'end'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

// .babelrc

{

"presets" : [ [ "@babel/preset-env" , { "modules" : "commonjs" } ] ]

}

// input.js

import { func1 } from './input2'

function main ( ) {

console . log ( 'start' )

func1 ( )

console . log ( 'end' )

}

// output.js

"use strict" ;

var _input = require ( "./input2" ) ;

( 0 , _input . func1 ) ( ) ;

}

When working with webpack you may often see the modules: false option, the purpose to turn off the ES6 module conversion function because the webpack already supports it and makes it even better.

targets

string | Array<string> | { [string]: string } , defaults to {}

Describe the environments your project supports

For example you want to support chrome58 and ie11 environments

<span class="token comment">// .babelrc</span>
<span class="token punctuation">{</span>
  <span class="token string">"presets"</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span>
      <span class="token string">"@babel/preset-env"</span> <span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token string">"targets"</span> <span class="token punctuation">:</span> <span class="token punctuation">{</span>
          <span class="token string">"chrome"</span> <span class="token punctuation">:</span> <span class="token string">"58"</span> <span class="token punctuation">,</span>
          <span class="token string">"ie"</span> <span class="token punctuation">:</span> <span class="token string">"11"</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>

// .babelrc

{

"presets" : [

[

"@babel/preset-env" ,

{

"targets" : {

"chrome" : "58" ,

"ie" : "11"

}

]

}

useBuiltIns

"usage" | "entry" | false , defaults to false This option configures how @babel/preset-env handles polyfill

These 2 packages need to be installed so babel can help you import polyfill

<span class="token string">"core-js"</span> <span class="token comment">// hoặc chỉ định rõ version <a href="/cdn-cgi/l/email-protection" class="__cf_email__">[email protected]</a></span>
<span class="token string">"regenerator-runtime/runtime"</span>

"core-js" // hoặc chỉ định rõ version <a href="/cdn-cgi/l/email-protection" class="__cf_email__">[email protected]</a>

"regenerator-runtime/runtime"

For example we use useBuiltIns: usage and corejs: 3

<span class="token comment">// input.js</span>
<span class="token keyword">const</span> handleAsyncAwait <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> greeting <span class="token operator">=</span> <span class="token keyword">await</span> Promise <span class="token punctuation">.</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> <span class="token string">'hi'</span> <span class="token punctuation">)</span>
  <span class="token keyword">return</span> greeting
<span class="token punctuation">}</span>

<span class="token keyword">const</span> myMap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
<span class="token keyword">const</span> myArray <span class="token operator">=</span> Array <span class="token punctuation">.</span> <span class="token keyword">from</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> x <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> x <span class="token operator">+</span> x <span class="token punctuation">)</span>
<span class="token keyword">const</span> isExistedInArray <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'a'</span> <span class="token punctuation">,</span> <span class="token string">'b'</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">includes</span> <span class="token punctuation">(</span> <span class="token string">'a'</span> <span class="token punctuation">)</span>

// input.js

const handleAsyncAwait = async ( ) => {

const greeting = await Promise . resolve ( 'hi' )

return greeting

}

const myMap = new Map ( )

const myArray = Array . from ( [ 1 , 2 , 3 ] , ( x ) => x + x )

const isExistedInArray = [ 'a' , 'b' ] . includes ( 'a' )

For each different target , the number of imported polyfill will also be different

with target is ie11

<span class="token comment">// .babelrc</span>
<span class="token punctuation">{</span>
  <span class="token string">"presets"</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span>
      <span class="token string">"@babel/preset-env"</span> <span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token string">"useBuiltIns"</span> <span class="token punctuation">:</span> <span class="token string">"usage"</span> <span class="token punctuation">,</span>
        <span class="token string">"corejs"</span> <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">,</span>
        <span class="token string">"targets"</span> <span class="token punctuation">:</span> <span class="token punctuation">{</span>
          <span class="token string">"ie"</span> <span class="token punctuation">:</span> <span class="token number">11</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token comment">// output.js</span>
<span class="token string">"use strict"</span> <span class="token punctuation">;</span>

<span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">"core-js/modules/es.array.from"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">"core-js/modules/es.array.includes"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">"core-js/modules/es.array.iterator"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">"core-js/modules/es.map"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">"core-js/modules/es.object.to-string"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">"core-js/modules/es.promise"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">"core-js/modules/es.string.iterator"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">"core-js/modules/web.dom-collections.iterator"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">"regenerator-runtime/runtime"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">asyncGeneratorStep</span> <span class="token punctuation">(</span> gen <span class="token punctuation">,</span> resolve <span class="token punctuation">,</span> reject <span class="token punctuation">,</span> _next <span class="token punctuation">,</span> _throw <span class="token punctuation">,</span> key <span class="token punctuation">,</span> arg <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> info <span class="token operator">=</span> gen <span class="token punctuation">[</span> key <span class="token punctuation">]</span> <span class="token punctuation">(</span> arg <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">var</span> value <span class="token operator">=</span> info <span class="token punctuation">.</span> value <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> <span class="token class-name">error</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">reject</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> info <span class="token punctuation">.</span> done <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> value <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> Promise <span class="token punctuation">.</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> value <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> _next <span class="token punctuation">,</span> _throw <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">_asyncToGenerator</span> <span class="token punctuation">(</span> fn <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> self <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">,</span> args <span class="token operator">=</span> arguments <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> resolve <span class="token punctuation">,</span> reject <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> gen <span class="token operator">=</span> fn <span class="token punctuation">.</span> <span class="token function">apply</span> <span class="token punctuation">(</span> self <span class="token punctuation">,</span> args <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">_next</span> <span class="token punctuation">(</span> value <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">asyncGeneratorStep</span> <span class="token punctuation">(</span> gen <span class="token punctuation">,</span> resolve <span class="token punctuation">,</span> reject <span class="token punctuation">,</span> _next <span class="token punctuation">,</span> _throw <span class="token punctuation">,</span> <span class="token string">"next"</span> <span class="token punctuation">,</span> value <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">_throw</span> <span class="token punctuation">(</span> err <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">asyncGeneratorStep</span> <span class="token punctuation">(</span> gen <span class="token punctuation">,</span> resolve <span class="token punctuation">,</span> reject <span class="token punctuation">,</span> _next <span class="token punctuation">,</span> _throw <span class="token punctuation">,</span> <span class="token string">"throw"</span> <span class="token punctuation">,</span> err <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">_next</span> <span class="token punctuation">(</span> undefined <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span>

<span class="token keyword">var</span> handleAsyncAwait <span class="token operator">=</span> <span class="token comment">/*#__PURE__*/</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> _ref <span class="token operator">=</span> <span class="token function">_asyncToGenerator</span> <span class="token punctuation">(</span> <span class="token comment">/*#__PURE__*/</span> regeneratorRuntime <span class="token punctuation">.</span> <span class="token function">mark</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token function">_callee</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> greeting <span class="token punctuation">;</span>
    <span class="token keyword">return</span> regeneratorRuntime <span class="token punctuation">.</span> <span class="token function">wrap</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token function">_callee$</span> <span class="token punctuation">(</span> _context <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">while</span> <span class="token punctuation">(</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">switch</span> <span class="token punctuation">(</span> _context <span class="token punctuation">.</span> prev <span class="token operator">=</span> _context <span class="token punctuation">.</span> next <span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">case</span> <span class="token number">0</span> <span class="token punctuation">:</span>
            _context <span class="token punctuation">.</span> next <span class="token operator">=</span> <span class="token number">2</span> <span class="token punctuation">;</span>
            <span class="token keyword">return</span> Promise <span class="token punctuation">.</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> <span class="token string">'hi'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

          <span class="token keyword">case</span> <span class="token number">2</span> <span class="token punctuation">:</span>
            greeting <span class="token operator">=</span> _context <span class="token punctuation">.</span> sent <span class="token punctuation">;</span>
            <span class="token keyword">return</span> _context <span class="token punctuation">.</span> <span class="token function">abrupt</span> <span class="token punctuation">(</span> <span class="token string">"return"</span> <span class="token punctuation">,</span> greeting <span class="token punctuation">)</span> <span class="token punctuation">;</span>

          <span class="token keyword">case</span> <span class="token number">4</span> <span class="token punctuation">:</span>
          <span class="token keyword">case</span> <span class="token string">"end"</span> <span class="token punctuation">:</span>
            <span class="token keyword">return</span> _context <span class="token punctuation">.</span> <span class="token function">stop</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span> _callee <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

  <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token function">handleAsyncAwait</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> _ref <span class="token punctuation">.</span> <span class="token function">apply</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">,</span> arguments <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token keyword">var</span> myMap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token keyword">var</span> myArray <span class="token operator">=</span> Array <span class="token punctuation">.</span> <span class="token keyword">from</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> x <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> x <span class="token operator">+</span> x <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token keyword">var</span> isExistedInArray <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'a'</span> <span class="token punctuation">,</span> <span class="token string">'b'</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">includes</span> <span class="token punctuation">(</span> <span class="token string">'a'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

// .babelrc

{

"presets" : [

[

"@babel/preset-env" ,

{

"useBuiltIns" : "usage" ,

"corejs" : 3 ,

"targets" : {

"ie" : 11

}

]

}

// output.js

"use strict" ;

require ( "core-js/modules/es.array.from" ) ;

require ( "core-js/modules/es.array.includes" ) ;

require ( "core-js/modules/es.array.iterator" ) ;

require ( "core-js/modules/es.map" ) ;

require ( "core-js/modules/es.object.to-string" ) ;

require ( "core-js/modules/es.promise" ) ;

require ( "core-js/modules/es.string.iterator" ) ;

require ( "core-js/modules/web.dom-collections.iterator" ) ;

require ( "regenerator-runtime/runtime" ) ;

var handleAsyncAwait = /*#__PURE__*/ function ( ) {

var _ref = _asyncToGenerator ( /*#__PURE__*/ regeneratorRuntime . mark ( function _callee ( ) {

var greeting ;

return regeneratorRuntime . wrap ( function _callee$ ( _context ) {

while ( 1 ) {

switch ( _context . prev = _context . next ) {

case 0 :

_context . next = 2 ;

return Promise . resolve ( 'hi' ) ;

case 2 :

greeting = _context . sent ;

return _context . abrupt ( "return" , greeting ) ;

case 4 :

case "end" :

return _context . stop ( ) ;

}

} , _callee ) ;

} ) ) ;

return function handleAsyncAwait ( ) {

return _ref . apply ( this , arguments ) ;

} ;

} ( ) ;

var myMap = new Map ( ) ;

var myArray = Array . from ( [ 1 , 2 , 3 ] , function ( x ) {

return x + x ;

} ) ;

var isExistedInArray = [ 'a' , 'b' ] . includes ( 'a' ) ;

with target chrome60

<span class="token comment">// .babelrc</span>
<span class="token punctuation">{</span>
  <span class="token string">"presets"</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span>
      <span class="token string">"@babel/preset-env"</span> <span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token string">"useBuiltIns"</span> <span class="token punctuation">:</span> <span class="token string">"usage"</span> <span class="token punctuation">,</span>
        <span class="token string">"corejs"</span> <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">,</span>
        <span class="token string">"targets"</span> <span class="token punctuation">:</span> <span class="token punctuation">{</span>
          <span class="token string">"chrome"</span> <span class="token punctuation">:</span> <span class="token number">60</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token comment">// output.js</span>
<span class="token string">"use strict"</span> <span class="token punctuation">;</span>

<span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">"core-js/modules/es.array.iterator"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">"core-js/modules/es.promise"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">"core-js/modules/web.dom-collections.iterator"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> handleAsyncAwait <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> greeting <span class="token operator">=</span> <span class="token keyword">await</span> Promise <span class="token punctuation">.</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> <span class="token string">'hi'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">return</span> greeting <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> myMap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> myArray <span class="token operator">=</span> Array <span class="token punctuation">.</span> <span class="token keyword">from</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> x <span class="token operator">=&gt;</span> x <span class="token operator">+</span> x <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> isExistedInArray <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'a'</span> <span class="token punctuation">,</span> <span class="token string">'b'</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">includes</span> <span class="token punctuation">(</span> <span class="token string">'a'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

// .babelrc

{

"presets" : [

[

"@babel/preset-env" ,

{

"useBuiltIns" : "usage" ,

"corejs" : 3 ,

"targets" : {

"chrome" : 60

}

]

}

// output.js

"use strict" ;

return greeting ;

} ;

const myArray = Array . from ( [ 1 , 2 , 3 ] , x => x + x ) ;

Normally for company projects, you should use useBuiltIns: entry and import these 2 first in the file entry will bundle

<span class="token keyword">import</span> <span class="token string">"core-js/stable"</span>
<span class="token keyword">import</span> <span class="token string">"regenerator-runtime/runtime"</span>

import "core-js/stable"

import "regenerator-runtime/runtime"

And it will import all the polyfill based on the corresponding environment

loose

boolean defaults to false

Many plugin in babel have 2 modes

Normal mode follows ECMAScript 's semantics as closely as possible when converting them into ES5
The loose action will make ES5 code simpler when transformed (less code but sometimes unsafe by 1).

There are also many other options you can read more here

3. Conclusion

Through this article hope to help you somewhat better understand this package:

See the code conversion.
The environment in which your project is directed is most fully supported and also reduces the size of the bundle file.
polyfill code.

Thank you for reading this article.

Complete the above example at the repo

Share the news now

Source : Viblo

What do you need to know when using @ babel / preset-env?

Hello everyone, package `@babel/preset-env` may many of you are familiar with it but do you really understand its power? Let's find out together today. Into the

1. Preparation

Request:

Purpose:

2. Content

What is Babel?

Preset env

Options

modules

targets

useBuiltIns

loose

3. Conclusion

Technology expert unmasks 'Location tracking software' widely sold on MXH, warning of scams

OpenAI CEO feels "bad" because of ChatGPT's security bug

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers

Hello everyone, package @babel/preset-env may many of you are familiar with it but do you really understand its power? Let's find out together today. Into the <img class="emoji" alt="?" src="https://twemoji.maxcdn.com/2/72x72/1f600.png" />

1. Preparation

Request:

Purpose:

2. Content

What is Babel?

Preset env

Options

modules

targets

useBuiltIns

loose

3. Conclusion

Technology expert unmasks 'Location tracking software' widely sold on MXH, warning of scams

OpenAI CEO feels "bad" because of ChatGPT's security bug

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers

Hello everyone, package `@babel/preset-env` may many of you are familiar with it but do you really understand its power? Let's find out together today. Into the