Babel简介
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。
安装
npm install -g bable-cli
全局安装
babel --version
查看版本
Babel的使用
1、首先我们创建一个目录,使用npm init -y
初始化一个node工程
2、编写一段程序,基于es6(es2015)语法
let name = "xiuyuandashen";
let title = "es6语法";
let arr=[1,2,3,4,5,6];
let newArr = arr.map(a=>a*2);
console.log("name= ",name);
console.log("titlle= ",title);
console.log("newArr",newArr);
3、在项目根目录(与package.json同级),创建一个名为.babelrc
或.babelrc.json
或者babel.config.js
或babel.config.json
的文件
重要参数:
-
plugins:Babel插件可以将输入源码进行转换,输出编译后的代码。
-
presets:一组Babel插件,目的是方便使用。官方已经内置了一些preset,如babel-preset-env。
4、安装相应的转换器,我们需要通过解释器将我们的代码转换成浏览器可以支持的版本。
npm install --save-dev babel-preset-es2015
这是安装es2015的转换器
5、执行转换 babel src -d dist
将 src
目录下的代码转换成浏览器可以支持的代码,并将代码保存至dist
目录中 。
- 指定转换单个文件
babel src/test.js --out-file dist2/test2.js
将src下的test.js文件转换后保存至dist2/test2.js(--out-file
可以使用-o
代替) -d 或者 --out-dir
可以 将整个目录转码 如babel src -d dist
转换之后的代码,与未转换前的对比,将箭头函数改为function
"use strict";
var name = "xiuyuandashen";
var title = "es6语法";
var arr = [1, 2, 3, 4, 5, 6];
var newArr = arr.map(function (a) {
return a * 2;
});
console.log("name= ", name);
console.log("titlle= ", title);
console.log("newArr", newArr);
自定义脚本(简化命令输入)
我们可以在package.json
脚本中定义命令。(Vue中所谓的npm run dev 也是如此)
{
......,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"babel src -d dist2"
},
......
}
scripts
中定义的key
,我们可以通过npm run key
来访问,这样的话运行的命令就是key所对应的value命令了。
比如:上边运行npm run build
相当于运行了babel src -d dist2
。
以上这些都是后期前端框架的基础,,