Babel Basic Usage Detailed Explanation

What is babel?

babel is a powerful multi-purpose js compiler Click to enterofficial website

Install babel

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

babel configuration file

represented by .babelrc

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

presets to store some presets

plugins to store some plugins　

simple usage of the command line

We can use -o (--out-the file) parameter to compile a file

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

If we want to compile the entire directory -d (--out-dir) parameter

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

preset

Now there is a piece of es6code, we want to use babel to compile this code, at the moment, the compiled code is almost a copy of the original

es6.js

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

We can install babel-preset-es2015to parse es2015syntax

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

Then configure the .babelrc file

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

So we can do the es2015Grammar parsing. Finally, through the configuration of package.json scripts

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

Next, directly in the command line

npm run build

Plugin

There are many plugins in babel, for example, how should we convert the following code into umd form?63;

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

First, find the corresponding plugin babel-plugin-transform-es2015-modules-umd, install this plugin

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

Introduce in the configuration

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

Then after compilation, it will be what we want

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

Integrate gulp

babel can be used alone, or it can be combined with build tools (gulp, webpack, etc.)

First, download gulp and the corresponding babel plugin for gulp

npm install gulp gulp-babel --save-dev

Create gulp configuration 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 the scripts in package.json

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

Execute the command last

npm run dev

That's all for this article. I hope the content of this article can bring you some help in learning or working, and I also hope to support the呐喊 tutorial more!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liabilities. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting. Provide relevant evidence, and once verified, this site will immediately delete the content suspected of infringement.)