Explication détaillée de l'utilisation de Babel

Qu'est-ce que babel?

babel est un compilateur JavaScript polyvalent puissant, cliquez pour entrersite officiel

Installer babel

npm install -g babel-cli 
npm install --save-dev babel-cli

fichier de configuration babel

représenté par .babelrc

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

presets pour stocker des préréglages

plugins pour stocker des plugins　

l'utilisation simple de la ligne de commande

Nous pouvons passer par -o (--out-file) Paramètres pour compiler un fichier

babel es6.js -o es5.js / babel es6 --out-file es5.js

Si nous voulons compiler tout le répertoire -d (}}--out-dir)paramètre

babel　 src -d build / babel　 src --out-dir build

préfixe

Maintenant, il y a un segment es6le code, nous voulons utiliser babel pour compiler ce segment de code, pour le moment, le code compilé est presque une copie conforme

es6.js

var add = (a,b) =>{
 console.log(a+b)
}
add(1,2)

Nous pouvons installer babel-preset-es2015pour analyser es2015de la syntaxe

npm install --save-dev babel-preset-es2015

Ensuite, configurez le fichier .babelrc

{
 "presets": ["es"2015"]
}

De cette manière, nous pouvons effectuer des opérations sur es2015L'analyse grammaticale a été effectuée. Enfin, à travers la configuration de scripts dans package.json

"scripts": {
 "build" : "babel src" -d build -w"
 }

Ensuite, directement dans la ligne de commande

npm run build

Plugin

Il y a beaucoup de plugins dans babel, par exemple, comment devons-nous convertir le segment de code suivant en forme umd ??

var add = (a,b) =>{
 console.log(a+b)
}
add(1,2)

Tout d'abord, trouvez l'extension babel correspondante-plugin-transform-es2015-modules-umd, installez ce plugin

npm install --save-dev babel-plugin-transform-es2015-modules-umd

Dans la configuration, ajoutez

{
 "presets":["es"2015"],
 "plugins":["transform"-es2015-modules-umd"]
}

Puis, après compilation, c'est ce que nous voulons obtenir

(function (global, factory) {
 if (typeof define === "function" && define.amd) {
 define(["module", "exports"], factory);
 } else if (typeof exports !== "undefined") {
 factory(module, exports);
 } else {
 var mod = {
  exports: {}
 }
 factory(mod, mod.exports);
 global.sum = mod.exports;
 }
})(this, function (module, exports) {
 "use strict";
 Object.defineProperty(exports, "__esModule", {
 value: true
 });
 var sum = function sum(a, b) {
 return a + b;
 }
 exports.default = sum;
 module.exports = exports["default"];
});

Intégrer gulp

babel peut être utilisé seul ou conjointement avec des outils de construction (gulp webpack, etc.)

Tout d'abord, téléchargez gulp et le plugin babel correspondant

npm install gulp gulp-babel --save-dev

Créer la configuration gulp gulpfile.js

const gulp = require('gulp')
const babel = require('gulp-babel')
gulp.task('babel', ()=>{
 return gulp.src('src/**/*.js')
  .pipe(babel())  
  .pipe(gulp.dest('dist'))
}
gulp.task('default' , ['babel'])

Configurez les scripts de package.json

"scripts": {
 "dev" : "./node_modules/.bin/gulp"
 }

Dernière exécution de la commande

npm run dev

Voici la totalité du contenu de cet article. J'espère que le contenu de cet article peut apporter un certain aide à votre apprentissage ou à votre travail, et j'espère également que vous pouvez soutenir le tutoriel de cri!

Déclaration : le contenu de cet article est extrait du réseau, propriété de l'auteur original, contribué et téléversé par les utilisateurs d'Internet de manière spontanée. Ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)