Spiegazione dettagliata dell'uso di babel

Cos'è babel?

Babel è un potente compilatore JavaScript multiproposito, clicca per entrareSito ufficiale

Installare babel

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

File di configurazione babel

Rappresentato da .babelrc

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

Presets viene utilizzato per memorizzare alcune preimpostazioni

Plugins viene utilizzato per memorizzare alcune estensioni　

Utilizzo semplice della riga di comando

Possiamo compilare un file attraverso il parametro -o (--out-file)

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

Se vogliamo compilare l'intera directory -d (--out-dir) parametro

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

Preimpostazioni

Adesso c'è un pezzo di codice es6, vogliamo usarlo con babel per compilare questo codice, per ora, il codice compilato è praticamente una copia fedele

es6.js

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

Possiamo installare babel-preset-es2015 per analizzare la sintassi es2015

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

Poi tramite la configurazione del file .babelrc

{
 "presets": ["es2015"]
}

Così possiamo eseguire l'analisi della sintassi es2015. Infine, tramite la configurazione di scripts nel file package.json

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

Poi eseguire direttamente sulla riga di comando

npm run build

Plugin

In Babel ci sono molti plugin, ad esempio, come possiamo trasformare il seguente segmento di codice in forma UMD?

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

Prima trovare l'estensione corrispondente babel-plugin-transform-es2015-modules-umd e installarla.

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

In configurazione includere

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

Poi la compilazione sarà proprio ciò che desideriamo.

(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 somma = function somma(a, b) {
 return a + b;
 };
 exports.default = somma;
 module.exports = exports["default"];
});

Integra gulp

babel può essere utilizzato separatamente, ma può anche essere combinato con strumenti di costruzione (gulp, webpack, ecc.)

Prima di tutto, devi scaricare gulp e il plugin babel corrispondente di gulp

npm install gulp gulp-babel --save-dev

Crea la configurazione 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'])

Configura i scripts nel package.json

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

Eseguire l'ultimo comando

npm run dev

Questo è tutto il contenuto dell'articolo, speriamo che il contenuto di questo articolo possa essere di qualche aiuto per il tuo studio o lavoro, e speriamo di ricevere un gran numero di supporti per il manuale urla!

Dichiarazione: il contenuto di questo articolo è stato prelevato da Internet, il diritto d'autore spetta ai rispettivi proprietari, il contenuto è stato contribuito autonomamente dagli utenti di Internet e caricato autonomamente, il sito web non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale pertinente. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, il sito web eliminerà immediatamente il contenuto sospetto di violazione del copyright.