Babel peut-il convertir es6 en es5

Oui, méthode de conversion : 1. Exécutez la commande "npm install -g babel-cli --save-dev" dans le répertoire racine du projet pour installer Babel dans le projet et stockez le fichier de configuration Babel ".babelrc" dans le racine du répertoire du projet et définissez les règles de transcodage ; 2. Installez gulp et gulp-babel dans le projet et configurez le fichier "gulpfile.js".

L'environnement d'exploitation de ce tutoriel : système windows7, ECMAScript 6&&babel version 6, ordinateur Dell G3.

Bien que nous soyons toujours obsédés par ES5, nous ne savons pas que ES6 est sorti depuis plusieurs années. Les temps avancent et la technologie WEB front-end évolue également chaque jour qui passe. Il est temps de faire quelques changements !

ECMAScript 6 (ES6) se développe très rapidement, mais les navigateurs modernes ne prennent pas en charge les nouvelles fonctionnalités d'ES6, donc si vous souhaitez utiliser les nouvelles fonctionnalités d'ES6 directement dans le navigateur, vous devez utiliser d'autres outils.
Babel est un transcodeur largement utilisé. Babel peut parfaitement convertir le code ES6 en code ES5, afin que nous puissions utiliser les fonctionnalités ES6 dans nos projets sans attendre la prise en charge du navigateur.

La différence entre babel 6 et les versions précédentes :

La version précédente n'a besoin que d'installer un babel, donc la version précédente contient beaucoup de choses, ce qui conduit également à télécharger beaucoup de choses inutiles. Mais dans babel 6, babel est divisé en deux packages : babel-cli et babel-core. Si vous souhaitez utiliser babel dans la CLI (terminal ou REPL), téléchargez babel-cli, si vous souhaitez l'utiliser dans le nœud, téléchargez babel-core. Babel 6 a été rendu aussi modulaire que possible. Si vous utilisez toujours la méthode antérieure à Babel 6 pour convertir ES6, il sera affiché tel quel et ne sera pas converti car vous devez installer un plug-in. Si vous souhaitez utiliser les fonctions fléchées, vous devez installer le plug-in de fonction fléchée npm install babel-plugin-transform-es2015-arrow-functions.

Dans cet article, nous ne discuterons pas des fonctionnalités de syntaxe d'ES6, mais nous concentrerons sur la façon de convertir le code ES6 en code ES5.

Transcodage Babel :

Si vous n'avez jamais été exposé à ES6, vous devez être un peu confus lorsque vous voyez le code suivant (Qu'est-ce que c'est que ça ? Dix mille bêtes mythiques se précipitent dans votre cœur ) ), mais vous avez bien lu, il s’agit de ES6. Que vous le voyiez ou non, c'est ici.

var a = (msg) => () => msg;
 
var bobo = {
  _name: "BoBo",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
};

En fait, une fois le code ci-dessus converti par Babel, il deviendra :

"use strict";
 
var a = function a(msg) {
  return function () {
    return msg;
  };
};
 
var bobo = {
  _name: "BoBo",
  _friends: [],
  printFriends: function printFriends() {
    var _this = this;
 
    this._friends.forEach(function (f) {
      return console.log(_this._name + " knows " + f);
    });
  }
};

D'accord, revenons au sujet, essayons quelques méthodes pour obtenir l'effet de transcodage ci-dessus.

1. Installez directement la méthode Babel :

1.1) Installez d'abord Babel globalement.

$ npm install -g babel-cli
 
//也可以通过直接将Babel安装到项目中，在项目根目录下执行下面命令，同时它会自动在package.json文件中的devDependencies中加入babel-cli
//在执行安装到项目中命令之前，要先在项目根目录下新建一个package.json文件。
$ npm install -g babel-cli --save-dev

Si vous installez babel directement dans votre projet, il ajoutera automatiquement babel-cli dans les devDependencies du fichier package.json. Comme indiqué ci-dessous :

	//......
	{
	  "devDependencies": {
	    "babel-cli": "^6.22.2"
	  }
	}

1.2) Le fichier de configuration de Babel est .babelrc, qui est stocké dans le répertoire racine du projet. La première étape de l'utilisation de Babel consiste à configurer ce fichier.

Le nom complet de ce fichier est ".babelrc", veuillez noter qu'il y a un "." Étant donné que mon ordinateur est un système Windows, lorsque je crée ce fichier, j'obtiens toujours l'erreur « Vous devez saisir le nom du fichier ». Plus tard, je l'ai recherché sur Google et j'ai découvert que lors de la création de ce fichier, j'avais changé le nom du fichier en ".babelrc.". Notez qu'il y a un point avant et après, afin qu'il puisse être enregistré avec succès

	{
	  "presets": [],
	  "plugins": []
	}

1.3) Définissez le règles de transcodage dans le champ des préréglages, le responsable fournit l'ensemble de règles suivant, vous pouvez l'installer en fonction de vos besoins.

Cliquez ici pour accéder à la page de configuration des préréglages du site officiel chinois de Babel : Plugins Babel

	# 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

1.4) Selon les invites du site officiel, après avoir installé ces outils de plug-in à l'aide de npm, nous devons ajouter ces règles à .babelrc. Comme indiqué ci-dessous :

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

1.5) Règles de transcodage et de transcodage :

	# 转码结果输出到标准输出
	$ babel test.js

	# 转码结果写入一个文件
	# --out-file 或 -o 参数指定输出文件
	$ babel a.js --out-file b.js
	# 或者
	$ babel a.js -o b.js

	# 整个目录转码
	# --out-dir 或 -d 参数指定输出目录
	$ babel src --out-dir lib
	# 或者
	$ babel src -d lib

	# -s 参数生成source map文件
	$ babel src -d lib -s

2. Méthode de configuration de l'outil :

En fait, nous pouvons réaliser la configuration du transcodage ES6 via de nombreux outils d'automatisation front-end, tels que , common grunt, gulp, Webpack et Node, etc. Ci-dessous, je parlerai brièvement de la méthode de configuration gulp que je connais mieux.

Cliquez ici pour accéder à la page de configuration de l'outil du site officiel chinois de Babel : Babel Tool

2.1) Tout d'abord, nous devons installer gulp dans le projet :

	$ npm install gulp --save-dev

2.2) Ensuite, nous devons installer gulp-babel dans le projet :

	$ npm install --save-dev gulp-babel

Dang Après avoir exécuté les deux commandes ci-dessus, nous constaterons que le contenu du fichier package.json dans le répertoire racine a été automatiquement modifié pour :

	{
	  "devDependencies": {
	    "babel-cli": "^6.22.2",
	    "gulp": "^3.9.1",
	    "gulp-babel": "^6.1.2"
	  }
	}

2.3) Écrivez le fichier gulpfile.js. Le fichier est le suivant :

	var gulp = require("gulp");
	var babel = require("gulp-babel");

	gulp.task("default", function () {
	  return gulp.src("src/a.js")
	    .pipe(babel())
	    .pipe(gulp.dest("lib"));
	});

Quand nous y sommes Après avoir exécuté la commande suivante dans le répertoire du projet actuel, vous constaterez que le fichier a.js initialement dans le dossier src (écrit selon les normes ES6) a été transcodé en norme ES5 a.js et placé dans le dossier lib.

	$ gulp default

	#或者用下面的命令也行
	$ gulp

【Recommandations associées : Tutoriel vidéo javascript, Vidéo de programmation】

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!