Explicação detalhada do uso básico do babel

O que é babel?

babel é um compilador JavaScript multipropósito poderoso, clique para entrarsite oficial

instalar o babel

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

arquivo de configuração do babel

representado por .babelrc

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

presets para armazenar algumas pré-configurações

plugins para armazenar alguns plugins　

o uso simples da linha de comando

Podemos usar -o (--out-o parâmetro file) para compilar um arquivo

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

Se quisermos compilar todo o diretório -d (}}--out-dir) parâmetro

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

configuração

Agora temos um trecho de es6O código do es, queremos usar o Babel para compilar este código, atualmente, o código compilado é praticamente uma cópia idêntica

es6.js

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

Podemos instalar o Babel-preset-es2015para analisar es2015da sintaxe

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

Depois disso, configure o arquivo .babelrc

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

Desta forma, podemos realizar a compilação de es2015A análise sintática foi concluída. Finalmente, através da configuração de scripts no package.json

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

A seguir, execute diretamente na linha de comando

npm run build

Plugin

No Babel, há muitos, muitos plugins, por exemplo, como podemos transformar o seguinte código em forma UMD??

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

Primeiro, encontre o plugin babel correspondente-plugin-transform-es2015-módulos-umd, instale o plugin

npm install --save-dev babel-plugin-transform-es2015-módulos-umd

Incluir na configuração

{
 "presets":["es",2015"],
 "plugins":["transform",-es2015-módulos-umd"]
}

Depois da compilação, temos o que queremos

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

Integrar gulp

babel pode ser usado sozinho ou combinado com ferramentas de construção (gulp, webpack, etc.)

Primeiro, baixe o gulp e o plugin babel correspondente

npm install gulp gulp-babel --save-dev

Crie o arquivo de configuração 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'])

Configure scripts no package.json

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

Execute o comando pela última vez

npm run dev

Isso é tudo o que há no artigo, esperamos que o conteúdo deste artigo ajude a aprendizagem ou ao trabalho de todos de alguma forma, e também esperamos que todos apoiem o tutorial Grito!

Declaração: O conteúdo deste artigo é proveniente da Internet, pertence ao respectivo proprietário, foi contribuído e carregado voluntariamente pelos usuários da Internet, o site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por questões legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, seja bem-vindo a enviar e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Caso seja confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)