Babel Basics

User 8083961413070 2021-09-15 09:08:54
babel basics

(1) What is? babel?

babel It's a js tool kit , For backward compatibility , Often used in new versions , That is, the new version can still use the old version code .
babel Main role of :1. Source code conversion .2. Conversion syntax For example, transcoding ( Downward compatibility is achieved by compiling the new version of code into the old version ):

// Babel Input :ES2015 Arrow function 
[1, 2, 3].map(n => n + 1);
// Babel Output :ES5 Equivalent grammar 
[1, 2, 3].map(function(n) { return n + 1; });
 Copy code 

We use @babel/cli Run from terminal Babel,@babel/polyfill be used for polyfill All new JavaScript function ,env preset Transformation rules that contain only the functions we use ,polyfills Used to populate missing features in the target browser .

(2)babel/core and @babel/cli

@babel/core We see in many places , It is Babel The core dependency package for transcoding , That we use a lot babel-cli and babel-node All depend on it

var babelCore = require("@babel/core");
var sourceCode = `let fn = (num) => num + 2`;
var options = {
// Whether to generate parsed code
code: true,
// Whether to generate abstract syntax tree
ast: true,
// Whether to generate sourceMap
sourceMaps: true,
plugins: [],
presets: [],
babelCore.transform(sourceCode, options, function (err, result) {
 Copy code 


You can find the original es6 The arrow function returns almost intact in the result ;Babel The operation mode of can be divided into three stages : analysis (parsing)、 transformation (transforming) And generation (generating); The plug-in responsible for the parsing phase is @babel/parser, Its function is to parse the source code into AST; The plug-in responsible for the generation phase is @babel/generator, Its function is to turn it into a good AST Regenerate code .

and @babel/core It does not have the function of conversion processing , It splits the conversion function into plug-ins (plugins) in ; So when we don't add any plug-ins , The input and output codes are the same .

stay @babel/core There are several by-products of conversion :code、ast and map

@babel/cli yes Babel Comes with a built-in CLI Command line tools , We can compile the file from the command line ; There are two ways to call it , It can be called through global installation or local installation , Just choose one , It is recommended to install... Locally .


Although we can configure various plug-ins on the command line (plugins) Or preset (presets, That is, a set of plug-ins ), However, this is not conducive to later viewing or maintenance , And most of the time babel It's all a combination webpack perhaps gulp And other packaging tool development , Not directly through the command line ; therefore Babel It is recommended to manage through configuration files .

Babel The main configuration files are .babelrc.babelrc.jsbabel.config.js and package.json, Their configuration options are the same , The effect is the same , The main difference lies in the difference of format Syntax , Therefore, we only need to select one of them in the project .

about .babelrc, Its configuration is mainly JSON Format , like this :

"presets": [...],
"plugins": [...]
 Copy code 

But sometimes we need to set parameters for plug-ins and presets , You can't directly use the form of string ; Instead, wrap another layer of array , The first item in the array is the name , The second item is the set parameter object :

"plugins": [
{ "spec": true }
 Copy code 

(3)babel The difference between presets and plug-ins :

Babel The official website provides nearly 100 plug-ins , However, if we configure plug-ins one by one in our code, we need to understand each plug-in , This is bound to cost a lot of time and energy ; So ,Babel Provides a preset (presets) The concept of , It means a series of pre-set plug-in packages ; This is equivalent to the set meal in KFC , Mix and match many products , Suitable for the needs of different people ; There is always a package for us .

Babel Official preset, What we may actually use is 4 individual :

  • @babel/preset-env
  • @babel/preset-flow
  • @babel/preset-react
  • @babel/preset-typescript

@babel/preset-env Is a smart preset , Allows you to use the latest JavaScript, Without the syntax transformation required to micromanage the target environment ( And an optional browser polyfill). This makes your life easier ,JavaScript The bag is smaller !

@babel/preset-env Pay more attention to adaptive browsers , If you specify to adapt to the latest chrome browser , Just modify the configuration to

"presets": [
"targets": "last 2 Chrome versions"
 Copy code 

The converted code will only fit chrome The latest two versions , That is not right class, Arrow function, etc .

(4) Execution order :

Both plug-ins and presets are configured in the configuration file in the form of arrays , If both the plug-in and the preset have to deal with the same code fragment , Then it will be determined according to the following execution rules :

  • The plug-in executes before the default
  • The plug-in execution order is that the plug-in array is executed from front to back
  • The default execution order is that the default array is executed from back to front

(5) @babel/polyfill

although @babel/preset-env You can convert most higher versions of JS grammar , But some ES6 Functions on the prototype chain ( For example, on an array instance filter、fill、find Such as function ) And new built-in objects ( such as Promise、Proxy Objects such as ), The lower version of the browser itself does not support , therefore @babel/preset-env There's nothing I can do with them .

For example, we often use filter function , stay IE There will be compatibility problems on the browser , So we passed polyfill( shim ) To solve the problem .polyfill Can be used at the entry file import It can also be introduced in webpack Configuration in file . But this package download rarely references , Because it will load all the functions , It will cause global pollution .

So from Babel7.4 Start @babel/polyfill It's not recommended , But directly introduce core-js And regenerator-runtime Two bags ; and @babel/polyfill It is also a collection of these two packages ; on top webpack Packed dist We can also see the file , These two packages are also referenced . that core-js What is it ?

It is JavaScript Standard library polyfill It is as modular as possible , Let you choose the functions you need It and babel Highly integrated , It can be done to core-js The introduction of is optimized to the greatest extent At present, the default we use is core-js@2, But it has blocked the branch , After that, the features will only be added to core-js@3, Therefore, it is also recommended to use the latest core-js@3.

 "presets": [
"useBuiltIns": "usage",
"corejs": 3
 Copy code 

At this point, he will introduce .

本文为[User 8083961413070]所创,转载请带上原文链接,感谢

  1. Vue learning -- watch listener
  2. Learn more about nexttick in Vue
  3. JavaScript genrator generator
  4. La dernière réponse à l'entrevue de développement Android, l'hiver froid de l'industrie
  5. Maserati's motorcycle has less than 10 in the world. It is definitely a work of art
  6. 2021 partage des questions du dernier examen écrit d'entrevue Android, pas d'accord
  7. Programmation asynchrone Java scirp, développement frontal de base
  8. 2021 dernier examen écrit d'entrevue Android, écrit trop bien
  9. Quels aspects doivent être pris en considération dans le tableau principal du distributeur libre - service?
  10. He inherited his mother's hundreds of millions of property for his boyfriend to squander. Unexpectedly, he was ruthlessly abandoned when he had 100 yuan left
  11. The fuel cost is half less than that of fuel vehicles at the same level. Is it really cheap to use song Pro DM?
  12. Le dernier résumé de l'expérience d'entrevue d'embauche de l'école Android de l'usine est nécessaire pour l'usine
  13. Le dernier dictionnaire avancé de programmeurs d'usine, l'expérience d'entrevue d'embauche de l'Agence de développement Android
  14. La dernière collection d'entrevues Android Golden nine Silver ten
  15. L'expérience d'entrevue de l'Ingénieur d'algorithme de saut d'octets, 2 mois d'entrevue Tencent, station B, Netease et ainsi de suite sur 11 entreprises résumé!
  16. La dernière collection d'entrevues d'Android Golden nine Silver ten recommande un projet github
  17. Yuan Li's recent situation revealed that he was obsessed with public welfare, dressed simply and fearless, grew fat, and married an 11-year-old husband
  18. Initial experience of template tool plop of [front end Engineering]
  19. Dernière question d'entrevue avancée et réponse d'Alibaba Android, Alibaba P8 vous apprendra en personne
  20. Partage des dernières questions d'entrevue pour Android haute fréquence, Introduction aux compétences d'entrevue pour le développement d'Android
  21. Partager les dernières questions d'entrevue Android haute fréquence avec quelques conseils
  22. About JavaScript modules
  23. Iteratable object and class arrays
  24. Function realization of Vue elementui exporting excel form
  25. Use canvas to realize a small screenshot function
  26. Object oriented programming (2)
  27. Several common value transfer methods between Vue components
  28. Démarrer avec le serveur de base zéro: Hello World
  29. J'a I construit un escalier pour aller sur la lune, combien de façons puis - je poursuivre la sœur Chang'e?
  30. CSS implémente la fonction d'expansion et d'arrimage du Texte multiligne
  31. Varlet CLI | vue3 Component Library Quick Prototyping Tool
  32. Belle vue sur les trois rivières Xiapu
  33. La partie Web qui déploie SharePoint ajoute son propre module de fonctionnalité
  34. React Native (mise à jour à long terme)
  35. La conception et le codage de l'arbre binaire requis pour chaque entrevue d'embauche de la société Java millet;
  36. 10 jours pour obtenir l'offre d'emploi Android d'Alibaba, entrevue Android
  37. A remporté avec succès Byte, Tencent, Pulse offer, 7 ans Java une expérience d'entrevue de baise,
  38. 10大前端常用算法,web应用与开发
  39. Nginx - minimum configuration! You deserve it
  40. Les questions d'entrevue couramment utilisées pour le cadre Java sont - elles prometteuses pour le développement Java?
  41. 10 algorithmes communs de première ligne, applications Web et développement
  42. 10大前端常用算法,移动web开发教程
  43. 10大前端常用算法,新手学web前端开发
  44. After brushing: wireless routing + USB offline Bt + remote management!
  45. Le vrai problème de l'entrevue Android d'Alibaba pour les années civiles 2019 - 2021, le tutoriel d'apprentissage Android
  46. 10 principaux algorithmes de première ligne couramment utilisés, nouveaux apprenants développement de première ligne Web
  47. 118页Vue面试题总结,web中间开发
  48. 118页Vue面试题总结,HTML列表标签
  49. Use vscode snippets to work with project members to improve development efficiency
  50. CentOS + Jenkins + nginx + gitlab front end automation deployment full record
  51. Build applet architecture from scratch
  52. Uni app series (V): hbuilderx runs the uniapp project to the page, views the preview and solves NPM: the error that the file cannot be loaded
  53. Front end interview daily 3 + 1 - day 877
  54. Understand the react lifecycle function
  55. 2020-2021前端面试题合集,web开发敏捷之道
  56. CSS - redraw reflow
  57. 90 lines of code to implement the module packer
  58. Front end internship interview preparation -- react others
  59. 118 page vue sommaire des questions d'entrevue, onglet liste HTML
  60. Vue sommaire des questions d'entrevue, développement intermédiaire du Web, 118 pages