You must have come across these libraries

babel-polyfill

Project address :https://github.com/babel/babel/blob/master/packages/babel-polyfill

Function through two dependencies

  • core-js/shim  Provide ES5/6/7 Implementation of standard method
  • regenerate-runtime  Provide async Syntax compiled runtime environment ( The following is a special description of )

babel-plugin-transform-runtime

Project address :https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime

Development ES6/7 This plug-in is recommended for libraries with new features , It should be noted that , When installing , Must be installed at the same time  babel-runtime  As a dependency :

npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime // `babel-plugin-transform-runtime` The plug-in itself depends on `babel-runtime` Of , But in order to adapt `npm install --production` It is strongly recommended to add this dependency .

The plug-in will es6/7 The grammar of es5 Compatible formats , And provide runtime dependencies . What is runtime dependency ? For example, if you want to use Array.from Method , The specific implementation of this method must be provided in the execution environment of the code , This is the runtime dependency .

When the plug-in converts Syntax , Will not pollute the overall environment . and  babel-polyfill  It will pollute the overall environment .

babel-plugin-external-helpers

Project address :https://github.com/babel/babel/blob/master/packages/babel-plugin-external-helpers/

There's very little code , Depend only on  babel-runtime. Comparison  babel-plugin-transform-runtime  Runtime code is injected into each module , The plug-in packages the runtime code , Similar to encapsulating under an object , This avoids injecting duplicate code .

Give Way async/await Run

Through the simplest function :

async function foo() {
return await 1
} foo().then(function(val) {
console.log(val) // should output 1
})

Explain these babel How to match plug-ins , Three options :

Scheme 1 :regenerator

.babelrc  The following configuration :

{
"plugins": ["transform-runtime", "babel-plugin-transform-regenerator", "babel-plugin-transform-es2015-modules-commonjs"]
}
  • babel-plugin-transform-regenerator take  async/await  Grammar into  regenerator  The syntax supported by the library
  • transform-runtime Inject the runtime into , similar :import regenerator from 'babel-runtime/regenerator'
  • babel-plugin-transform-es2015-modules-commonjs Just to get import Turn into require, Easy to do node.js Module execution ( If your execution environment supports es6 Module mechanism , The plug-in is not required ).

Option two :generator

This way, , Best fit node.js Environmental Science ,node.js Earliest from 0.11 Start , Then support generator..babelrc  The following configuration :

{
"plugins": ["babel-plugin-transform-async-to-generator"]
}

Generated code , stay node.js It can be executed directly in the environment , There is no need for babel Provide any information about generator Related runtime environment , direct node.js Bring their own ~

Option three :babel-polyfill

.babelrc  The following configuration :

{
"plugins": ["babel-plugin-transform-regenerator"]
}

In fact, and the front  regenerate  equally , Removed  runtime  To configure . After compiling , You need to manually add... To the first line of the result file :

require('babel-polyfill')

adopt  babel-polyfill  Inject runtime dependencies globally . When should I use  babel-polyfill  When to use  babel-runtime? The official website gives an explanation :

This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool.

  • If it's application level development , Consider using  babel-polyfill: Instead of , Support all es2015+ characteristic . You can add... At the entrance of the project , You can also configure the entry through the packaging tool .
  • If it's developing a library , Use  babel-runtime, It will not pollute the whole situation , And inject the required runtime environment according to the situation .

About babel-runtime For more details , It is strongly recommended that you read the official documents :https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/README.md

Don't forget externel-helpers

Just a simple foo function , A file . Multiple files , There is a similar injection for each file  asyncToGenerator  And so on , Lead to repetition . Illustrate with examples :

foo.js

'use strict'
const bar = require('./bar')
async function foo () {
const val = await bar()
console.log(val)
} foo()

bar.js

'use strict'
module.exports = async function bar () {
return await 'bar'
}

Adopt the above mentioned  generator  The way , To compile , You'll find in the result file , There are  _asyncToGenerator  Definition . modify  .babelrc  as follows :

{
"plugins": ["babel-plugin-transform-async-to-generator", "babel-plugin-external-helpers"]
}

To compile ,_asyncToGenerator  All become  babelHelpers.asyncToGenerator. such , There is no repeated code injection between multiple modules , It's cleaner and fresher . But this time  babelHelpers  It's undefined , You still need to introduce a runtime environment : transform-runtime, Finally, the configuration that can run is as follows :

{
"plugins": [
"babel-plugin-transform-async-to-generator",
"babel-plugin-external-helpers",
"transform-runtime",
"babel-plugin-transform-es2015-modules-commonjs"
]
}

See... For example code :https://github.com/sabakugaara/babel-example

This paper is compiled from :https://github.com/sabakugaara/sabakugaara.github.io/issues/8

[ turn ] With async/await For example , explain babel Plug in how to build more related articles

  1. With Python As an example of Async / Await The basis of programming

    source :Redislabs author :Loris Cro translate :Kevin ( official account : Middleware brother ) In recent years , Many programming languages are trying to improve their concurrency primitives .Go Language has goroutines,Ruby Yes fibe ...

  2. 【 turn 】 With Python As an example of Async / Await The basis of programming

    turn , original text :https://www.cnblogs.com/middleware/p/11996731.html With Python As an example of Async / Await The basis of programming -------------- ...

  3. Illustration and illustration Async/Await

    JavaScript ES7 Of async/await Syntax makes asynchrony promise It's easier to operate . If you need to get data asynchronously and sequentially from multiple databases or interfaces , You may end up writing a tangled promise With callback . However, using ...

  4. How Javascript works (Javascript working principle ) ( Four ) The emergence of event loops and asynchronous programming and 5 A better one async/await programmatically

    Personal summary : 1. Explained JS engine ,webAPI And event loop The mechanism of cooperation . 2.setTimeout It's pushing events to Web API To deal with , When it's time to put setTimeout Push events in the call stack . ...

  5. ES6 Introduction 11 :Generator generator 、async+await、Promisify

    Basic use of generator generator + Promise async+await Promise To transform Promisify Tool method One . Basic use of generator Before introducing the use of generators , It's easy to understand that the generator actually generates a ...

  6. The attachment 2:async/await

    In the actual development, there are always many asynchronous problems , The most common scenario is that you have to wait for a period of time to get the result after the interface request , If multiple interface dependencies are encountered , So the problem becomes complicated . People have been trying to use better solutions to solve these problems . In the beginning, we could only use ...

  7. [.NET] utilize async & await Asynchronous programming

    utilize async & await Asynchronous programming [ Blogger ] Anti bony boy [ Source ]http://www.cnblogs.com/liqingwen/p/5922573.html  Catalog Introduction to asynchronous programming different ...

  8. ASP.NET Medium Async/Await brief introduction

    Reprinted from MSDN author :Stephen Cleary Original address :https://msdn.microsoft.com/en-us/magazine/dn802603.aspx Most of them are about async ...

  9. About asynchronous execution (Async/await) The understanding of the ( forward )

    Original address : http://blog.jobbole.com/85787/ Synchronous programming and asynchronous programming Usually , We wrote C# Code is synchronized , Running in the same thread , From the first line of code to the last line of code, the program is executed in sequence . But different ...

Random recommendation

  1. [ original ]zepto Create a mobile terminal screen drawing plug-in

    Recently, I've been busy putting jquery 2 Switch to zepto Because I don't want to quote too much zepto package , So it took a little time zepto It's really streamlined a lot , The source code looks so comfortable It's just that the project needs a splash screen plug-in , Just use zepto Wrote a The logic is ...

  2. Oracle Database replay (Database Replay) Function demonstration

    We can capture the workload of the production environment , Replay on the test environment , So as to make some changes and tests without affecting the production environment . Capture : need Oracle Version is 10.2.0.4 Or higher . replay : need Oracle Version is 11g Release ...

  3. [moka Excerpts from classmates ]SQL inline 、 A simple understanding of outreach

    ( Derived from :http://blog.csdn.net/kkk9127/article/details/1487686) -- Query analyzer :-- Build table table1,table2:create table ...

  4. [USACO] Lay rectangular blocks Answer key

    The main idea of the topic : Given 4 Rectangular blocks , Find the smallest closed rectangle and put this 4 Put a rectangle into , But not overlapping each other . The so-called minimum rectangle refers to the smallest area of the rectangle . Ideas : Enumerate the placement order of rectangles , Then judge according to the picture given by the title , The main idea is enumeration . Code : ...

  5. adopt ajax visit aspx Of CodeBehind The method in

    introduction Suddenly I saw in the project ,aspx Medium ajax You can visit aspx.cs The method in , It's very novel , May be lz things seldom seen are strange , however , It's really exciting to find a new world , You may know what that means , Learned this way , On behalf of you in the future , You can build ...

  6. Android Lint brief introduction ( turn )

    Reprinted from the original :http://blog.csdn.net/hudashi/article/details/8333349, Thanks to the original author . The original English text :http://tools.android.com/tips ...

  7. Java One of the most efficient programming 【 Create and destroy objects 】

    One . Consider replacing constructors with static factory methods Represents the realization of :java.util.Collection Framework Boolean A simple example of a class : public static Boolean valueOf ( ...

  8. hdu 3724 Encoded Barcodes

    Trie Templates . Save all the words in the dictionary tree , Then give each node weight value to indicate that the prefix appears several times to the node . Then you can query it directly . #include <algorithm> #include <ios ...

  9. Single core CPU, Multithreading and performance

      Summary of problems Single core CPU On ,  Can multithreading improve the performance of programs ?  The question seems simple , It's very complicated , Design to many factors .  First of all, we need to make the concept clear ,  That's what performance is ?  Generally speaking ,  We're going to run a ...

  10. AES Introduction to the algorithm

    AES Introduction to the algorithm One . AES Structure 1. The overall structure The length of the plaintext group is 128 Bitwise is 16 byte , The key length can be 16,24 perhaps 32 byte (128,192,256 position ). According to the length of the key , The algorithm is called AES-128,AES ...