Explicación detallada del uso básico de babel

¿Qué es babel?

babel es un potente compilador de js multipropósito, haga clic aquí para entrarsitio web oficial

instalar babel

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

archivo de configuración de babel

representado por .babelrc

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

presets se utiliza para almacenar algunas configuraciones preestablecidas

plugins se utiliza para almacenar algunos complementos　

el uso simple de la línea de comandos

Podemos hacerlo a través de -o (--out-usando el parámetro file) para compilar un archivo

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

Si queremos compilar todo el directorio -d (}}--out-dir) parámetro

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

preset

Ahora hay un fragmento de código es6El código, queremos usar babel para compilar este código, por ahora, el código compilado es prácticamente una copia idéntica

es6.js

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

Podemos instalar babel-preset-es2015para analizar es2015de la sintaxis

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

Luego de configurar el archivo .babelrc

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

De esta manera podemos realizar la conversión de es2015La syntax analysis se ha completado. Finalmente, a través de la configuración de scripts en package.json

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

A continuación, ejecutar directamente en la línea de comandos

npm run build

Plugin

En babel hay muchos, muchos plugins, por ejemplo, si queremos convertir el siguiente fragmento de código en forma de umd, ¿cómo hacerlo?&63;

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

Primero, encontrar el plugin babel correspondiente-plugin-transform-es2015-modules-umd, instalar este plugin

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

En la configuración, agregar

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

Luego de compilar, tendremos lo que queremos

(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"];
});

Integrar gulp

babel se puede usar de manera independiente, también se puede combinar con herramientas de construcción (gulp webpack, etc.)

Primero, descargue gulp y el plugin babel correspondiente a gulp

npm install gulp gulp-babel --save-dev

Crear la configuración de gulp en 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'])

Configurar scripts en package.json

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

Última ejecución de comando

npm run dev

Este es el contenido completo del artículo, esperamos que el contenido de este artículo pueda proporcionar cierta ayuda a su aprendizaje o trabajo, y también esperamos que apoyen más al tutorial de clamor!

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha contribuido y subido por los usuarios de Internet de manera autónoma, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.