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
Utilisez la commande ci-dessus pour installer babel, où je veux dire installer, -g signifie installer globalementnpm 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);
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": [] }
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": [] }
"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-innpm i babel-plugin-transform-object-rest-spread --save-dev
{ "presets": ["es2015"], "plugins": ["transform-object-rest-spread"] }
let courses = { name: 'english', score: 90}; courses = { ...courses, comment: 'A'}; console.log(courses);
'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
attributsdans 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 pageComment développer un mot de passe de code de vérification dans le mini programme WeChat Fonction de zone de saisieCe 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!