Explication détaillée du cas de compilation de fichiers ES6 à l'aide de Babel (avec code)

Cette fois, je vais vous apporter une explication détaillée du cas où Babel compile des fichiers es6 (avec code). Quelles sont les précautions pour Babel compilant des fichiers es6. Ce qui suit est un cas pratique, prenons. un regard.

1.babel

Site officiel de babel

2. >

Utilisez la commande ci-dessus pour installer babel, où je veux dire installer, -g signifie installer globalement

npm i babel-cli -g

3. Utilisez pour créer le fichier es6.js

puis utilisez la commande pour compiler :

let num = [1,2,3,4]; 
let plusDouble = num.map(item => item * 2); 
console.log(plusDouble);

et ensuite il sera dans le répertoire actuel Le fichier compilé apparaît ci-dessous. De cette façon, nous avons terminé le processus de compilation. Cependant, lorsque nous exécutons le fichier compilé, une erreur sera toujours signalée. En fait, la raison principale est que la compilation ci-dessus n'a pas été ajoutée. contraintes, c'est-à-dire qu'il n'a pas dit à Babel Comment compiler, alors configurons babel

babel es6.js -o compiled.js

4 Configuration(1) Configurer via. fichier

Créez le fichier .babelrc dans le répertoire du projet, et écrivez le code suivant dans le fichier : Puisque babel est utilisé sous forme de plug-in, ajoutez des presets d'objets et des plug-ins

dans le code suivant Installez le plug-in À l'aide du plug-in suivant, vous pouvez compiler le code ES6 en code ES5 :

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

(--save-dev dans le code signifie. installé dans les dépendances de développement locales)

npm i --save-dev babel-preset-es2015

Modifiez ensuite le fichier dans .babelrc avec le contenu suivant :

À ce stade, nous avons terminé la configuration. Exécutez la commande de compilation pour obtenir le. résultats suivants :

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

Après l'exécution, les résultats peuvent être imprimés normalement

"use strict";  
var num = [1, 2, 3, 4]; 
var plusDouble = num.map(function (item) { 
 return item * 2; 
}); 
console.log(plusDouble);

Nous pouvons maintenant effectuer une compilation simple, mais il existe encore certaines restrictions sur certaines nouvelles fonctionnalités d'es7. nous utilisons des plug-ins pour la compilation, comme indiqué ci-dessous. Le plug-in d'extension d'objet

object

-rest-spread, de même, nous utilisons la commande pour installer

et également modifier dans le plug-in

npm i babel-plugin-transform-object-rest-spread --save-dev

puis testez-le via le code, dans le code Écrivez le contenu suivant dans ES7 (... est une idée préconçue dans ES7) :

{ 
 "presets": ["es2015"], 
 "plugins": ["transform-object-rest-spread"] 
}

Le résultat après compilation est :

let courses = { name: 'english', score: 90}; 
courses = { ...courses, comment: 'A'}; 
console.log(courses);

Développez l'objet en ajoutant la méthode _extends Convertissez et exécutez le code pour afficher le résultat normalement

'use strict';  
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };  
var courses = { name: 'english', score: 90 }; 
courses = _extends({}, courses, { comment: 'A' }); 
console.log(courses);

(2) En chargeant la configuration d'autres

attributs

dans le fichier de configuration du webpack Je le crois Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Comment utiliser js pour compter le nombre de balises de page

Comment développer un mot de passe de code de vérification dans le mini programme WeChat Fonction de zone de saisie

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!