Un transcodeur largement utilisé - Babel

Référence :

Babel

Babel est un transcodeur largement utilisé qui peut convertir le code ES6 en code ES5, permettant ainsi l'exécution d'un environnement existant

// 转码前
input.map(item => item + 1);// 转码后
input.map(function (item) {  return item + 1;});

Fichier de configuration

---

configuration Le fichier est .babelrc et est stocké dans le répertoire racine du projet. La première étape pour utiliser Babel est de configurer ce fichier

<span style="color: #888888"><code class=" language-javascript"><span class="token punctuation">{  <span class="token string">"presets"<span class="token punctuation">: <span class="token punctuation">[<span class="token punctuation">]<span class="token punctuation">,  <span class="token string">"plugins"<span class="token punctuation">: <span class="token punctuation">[<span class="token punctuation">]<span class="token punctuation">}<br/><br/><strong><code>presets</code>字段  </strong>设定转码规则，官方提供以下的规则集，你可以根据需要安装<br/></span></span></span></span></span></span></span></span></span></span></span></code></span>

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015# react转码规则
$ npm install --save-dev babel-preset-react# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

  {"presets": [      "es2015",      "react",      "stage-2"],"plugins": []  }

babel-register

---

babel-register module réécrit la commande require et y ajoute un hook. Par la suite, chaque fois que require est utilisé pour charger des fichiers avec les suffixes .js, .jsx, .es et .es6, Babel sera utilisé pour les transcoder en premier

　$ npm install --save- dev babel-register

Lors de l'utilisation, babel-register doit être chargé en premier

require("babel-register");

require("./index.js?1.1.11");

Ensuite, il n'est pas nécessaire de transcoder manuellement index.js.

Il convient de noter que babel-register ne transcodera que le fichier chargé par la commande require, pas le fichier actuel. De plus, comme il s'agit d'un transcodage en temps réel, il ne convient que pour une utilisation dans l'environnement de développement

babel-core

---

Si du code doit appeler l'API de Babel pour le transcodage, le module babel-core doit être utilisé.

Commande d'installation : $ npm install babel-core --save , Ensuite, babel-core peut être appelé dans le projet.

var babel = require('babel-core');

// Transcodage de chaîne
babel.transform('code();', options);
// => 🎜>//Transcodage de fichiers (asynchrone)

babel.transformFile('filename.js', options, function(err, result) {
result ; // => { code, map, ast }
});
// Transcodage de fichiers (synchrone)

babel.transformFileSync('filename.js', options);
// => { code, map, ast }
// Babel AST transcodage

babel.transformFromAst(ast, code, options);
// => >
Configurer les options de l'objet, vous pouvez vous référer au document officiel http://babeljs.io/docs/usage/options/

ci-dessous est un exemple.

var es6Code = 'let x = n => n + 1';

var es5Code = require('babel-core').transform(es6Code, {
presets : ['es2015']
})
Dans le code ci-dessus, le premier paramètre de la méthode de transformation est a Une chaîne représentant le code ES6 qui doit être converti. Le deuxième paramètre est l'objet de configuration converti.

babel-polyfill

Babel ne convertit que les nouveaux par syntaxe JavaScript (syntaxe) par défaut sans convertir de nouvelles API, telles que Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Promise et autres objets globaux, ainsi que certaines méthodes définies sur des objets globaux (telles que Object.assign) Ne sera pas transcodé.

---

Solution : utilisez babel-polyfill pour fournir une cale pour l'environnement actuel

$ npm install --save babel- polyfill

Dans l'en-tête du script, ajoutez la ligne de code suivante :

import 'babel-polyfill';
// ou
require('babel-polyfill');

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!