Maison > interface Web > js tutoriel > le corps du texte

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

php中世界最好的语言
Libérer: 2018-05-31 14:41:03
original
1382 Les gens l'ont consulté

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
Copier après la connexion

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);
Copier après la connexion

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
Copier après la connexion

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": [] 
}
Copier après la connexion

(--save-dev dans le code signifie. installé dans les dépendances de développement locales)
npm i --save-dev babel-preset-es2015
Copier après la connexion

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": [] 
}
Copier après la connexion

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);
Copier après la connexion

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
Copier après la connexion

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"] 
}
Copier après la connexion

Le résultat après compilation est :
let courses = { name: 'english', score: 90}; 
courses = { ...courses, comment: 'A'}; 
console.log(courses);
Copier après la connexion

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);
Copier après la connexion

(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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal