ES6 转换到 ES5的工具 - Babel的使用

Babel 是 ES2015 语法转换器，将ES6 转换为 ES5, 官网：http://babeljs.io

ES6 不能完全的呗浏览器兼用，所以我们可能需要转化成 ES5。

Babel的安装：

npm install -g babel-cli // -g 表示全局安装到 nodejs 下的目录 

将 Babel 的转换插件安装到项目的目录中：

npm install babel-preset-es2015 --save

示例代码：es6.js

let a = "colbert"

执行手动转换命令：

babel es6.js --out-file es5.js --presets es2015

转换后的 es5.js 文件：

"use strict";

var a = "colbert";
console.log(a);

如果我们每次修改代码都手动转换太过麻烦，加个自动监听的参数：-w

babel es6.js -w --out-file es5.js --presets es2015

这样我们只要一修改代码就能自动转化为 es5 的文件。

也可以在浏览器端实时转换es6转换为es5：

-- 下载转换组件库到项目的目录下
npm install babel-core@5 --save

// 引入es6的代码 text/babel

<script type="text/babel" src="es6.js"></script>
<!-- 网页端实时转换 -->
<script type="text/javascript" src="node_modules/babel-core/browser.min.js"></script>

图片.png

利用 browser-sync 实现实时刷新静态页面：

npm install -g browser-sync

// 启动3000端口，监听项目下的所有文件

browser-sync start --server --files "**"

图片.png

这样每次修改静态页面都能实时的在客户端显示出来了，很强大的有木有。