初识Babel

本文主要是介绍初识Babel，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

JavaScript 在不断发展，各种新标准和提案层出不穷，但是由于浏览器的多样性导致有可能几年之内都无法广泛普及，而babel可以让你提前使用这些语言特性。利用好这个工具，可以让我们在平时开发中，有意识的利用新特性去开发。

环境搭建：
① 要想在命令窗里使用babel 首先得安装babel-cli ( cli 是 command Line Interface 的缩写 ) 即：

      npm install babel-cli -g

② 写babel 的配置文件， 因为babel 是通过安装插件（plugin）和preset（就是设定好的一组插件，即插件的集合） 来编译代码的，（刚才只是安装了babel 工具而已）babel 的配置文件为 .babelrc 。通常是在工程的根目录处。
配置文件：

//  .babelrc 配置文件
{"presets":[],"plugins":[]
}

知道规则就得给babel 容器安装插件了。插件有很多，不清楚的可以去babeljs官网查询插件，这边以将【ES6代码编译成ES5代码】为例。
这时候我们应该考虑将这个功能作为开发依赖进行安装。

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

安装完成之后，可以到node_modules 文件下 ls 查看预设安装了哪些插件集合。

这时候.babelrc 变为：

//  .babelrc 配置文件
{"presets":['es2015'],"plugins":[]
}

现在配置完毕了，就可以使用了，开始之前先验证一下，在开发目录下（新建）touch 一个 a.js 文件
在里头写上：

let num = [2,3,4];
let complitNum = num.map((n)=>num *3 );
console.log(complitNum );

在命令台里输入:

babel a.js -o b.js

（-o 是output 的缩写） 这时候查看cat b.js 发现代码已经编译成ES5的代码了。

基本的你已经了解了，接着就是如何利用它在项目中使用了。

待写。。。

Babel的核心概念就是利用一系列的plugin来管理编译规则，通过不同的plugin,实现不一样的功能，比如：编译ES6代码，编译React JSX语法或者是CoffeeScript等等。这种的可扩展性和易用性使得它和容易和其他的构建工具搭建更省力的工具出来。
学习路径：
http://www.ruanyifeng.com/blog/2016/01/babel.html
https://github.com/babel/babel
http://babeljs.io/

这篇关于初识Babel的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---