一分钟入门 Babel(下一代 JavaScript 语法的编译器)
简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5,让低端运行环境(如浏览器和 node )能够认识并执行。严格来说,babel 也可以转化为更低的规范。但以目前情况来说,es5 规范已经足以覆盖绝大部分浏览器,因此常规来说转到 es5 是一个安全且流行的做法。
ES6转ES5(第一种)
初始化项目
npm init --y
安装依赖
npm install babel-cli -D
npm install babel-preset-es2015 -D
在项目中创建并编辑ES6文件
这里只是使用es6的语法举下例子,看下能否转译成es5语法。我们假设取名index.js,放在项目根目录的src文件夹里。
// src/index.js
let a = 1;
let fun = ()=>{
console.log(a);
}
编辑package.json
我们需要自己在scripts字段里添加命令:
build-t :单独编译某个文件
build-d:把一个文件夹内的所有文件统一编译到另一个文件夹里(文件夹自动生成,不需要自己创建)
build-o:把一个文件夹内的指定文件编译到另外的文件夹里(文件夹需要自己创建,可以指定文件名)
{
"name": "babel01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build-t":"babel index.js --presets es2015",
"build-d": "babel src -d lib --presets es2015",
"build-o":"babel src/index.js -o dist/index.js --presets es2015"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1"
}
}
启动编译
npm run <这里是scripts字段的命令>
下面是编译后的es5文件。
"use strict";
var a = 1;
var fun = function fun() {
console.log(a);
};
ES6转ES5(第二种)
其实跟第一种差不多。
初始化项目
npm init --y
安装依赖
npm install babel-cli -D
npm install babel-preset-es2015 -D
在项目中创建并编辑ES6文件
这里只是使用es6的语法举下例子,看下能否转译成es5语法。我们假设取名index.js,放在项目根目录的src文件夹里。
// src/index.js
let a = 1;
let fun = ()=>{
console.log(a);
}
在项目中创建并编辑.babelrc文件
在根目录下创建.babelrc文件。
{
"presets": ["es2015"],
"plugins": []
}
编辑package.json
我们需要自己在scripts字段里添加命令,命令内容与第一种方法的一样,这里只不过省了--presets es2015。
{
"name": "babel01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build":"babel src/index.js -o dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1"
}
}
启动编译
npm run build
下面是编译后的es5文件。
"use strict";
var a = 1;
var fun = function fun() {
console.log(a);
};
ES6+转ES5
这里 ES6+ 说的是ES6、ES7、ES8等。
初始化项目
npm init --y
安装依赖
npm install babel-cli -D
npm install babel-preset-env -D
在项目中创建并编辑ES6文件
这里只是使用es6的语法举下例子,看下能否转译成es5语法。我们假设取名index.js,放在项目根目录的src文件夹里。
// src/index.js
let a = 1;
let fun = ()=>{
console.log(a);
}
在项目中创建并编辑.babelrc文件
在根目录下创建.babelrc文件。
{
"presets": ["env"]
}
编辑package.json
命令内容不只是这一个,根据你需求写,其他命令可以看上面的ES6转ES5(第一种)。
{
"name": "babel01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel src -d dist"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1"
}
}
启动编译
npm run build
下面是编译后的es5文件。
"use strict";
var a = 1;
var fun = function fun() {
console.log(a);
};
结语
本篇主要介绍了ES6转ES5的两种方法以及ES6+怎样转ES5。不过现在大部分使用ES6+怎样转ES5比较多,主要让大家体验下升级的感觉。
作者:Vam的金豆之路
主要领域:前端开发
我的微信:maomin9761
微信公众号:前端历劫之路