一.介绍:
Babel是一个Javascript编译器,可以将ES6语法转换成ES5。
这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持。下面是一个例子:
//转码前:
input.map(item => item + 1);
//转码后:
input.map(function(item){
return item + 1;
});
二.使用ES6语法:
- 创建项目test:
- npm init
- cnpm install –save-dev babel-cli: Babel提供
babel-cli
工具,用于命令行转码。 - cnpm install –-save-dev babel-preset-latest:最新的ES6语法都能包含
- Babel的配置文件是
.babelrc
,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。 - 该文件用来设置转码规则和插件,基本格式如下:
{
"presets":["latest"]
//或者
"presets":["es2015"]
}
7.cnpm install babel-core@5:Babel也可以用于浏览器环境。但是,从Babel 6.0开始,不再直接提供浏览器版本,而是要用构建工具构建出来。如果你没有或不想使用构建工具,可以通过安装5.x版本的babel-core
模块获取。
8.然后,将下面的代码插入网页。
<script src="node_modules/babel-core/browser.js"></script>
<!—-浏览器功能: browser-pollfill.js 让浏览器支持所需要的功能-->
<script src="node_modules/babel-core/browser-pollfill.js"></script> <script type="text/babel">
//Your ES6 code
let a = [1,2],
b = [...a,'3'];
document.body.innerHTML = b;
console.log(b);
</script>
9. browser-sync start –server:自动打开浏览器显示
另外:
- babel in.js –-out-file out.js: 将es6的in.js文件转换成es5并放到out.js中