Tool系列—Babel
1、简单介绍
这些转换器 (更准确地说是源代码到源代码的编译器) 可以把你写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码，并且可以确保良好地运行在所有主流 JavaScript 引擎中。
Babel对 ES6 的支持程度比其它同类更高，而且 Babel 拥有完善的文档和一个很棒的 在线交互式编程环境。
2、学习资料
Babel官网
http://babeljs.io/docs/setup/
3、Babel介绍
babel可以惊醒单独使用。
3.1、环境安装
npm install --global babel-cli
3.2、编译单独文件
Compile the file script.js and output to stdout.
$ babel script.js # output...
If you would like to output to a file you may use --out-file or -o.
$ babel script.js --out-file script-compiled.js
To compile a file every time that you change it, use the --watch or -w option:
$ babel script.js --watch --out-file script-compiled.js
3.3、Compile with Source Maps（不太会用，回头再说）
If you would then like to add a source map file you can use --source-maps or -s. Learn more about source maps.
$ babel script.js --out-file script-compiled.js --source-maps
If you would rather have inline source maps, you may use --source-maps inline.
$ babel script.js --out-file script-compiled.js --source-maps inline
3.4、编译文件夹
Compile the entire src directory and output it to the lib directory. You may use --out-dir or -d.
$ babel src --out-dir lib
Compile the entire src directory and output it to the one concatenated file.
$ babel src --out-file script-compiled.js
3.5、管道文件（Piping Files）（应用场景不太清楚）
Pipe a file in via stdin and output it to script-compiled.js
$ babel --out-file script-compiled.js < script.js
4、Babel-node介绍（应用场景不太清楚）
就是和node的一样就是可以直接在cmd中敲命令，运行代码
babel comes with a second CLI which works exactly the same as Node.js's CLI, only it will compile ES6 code before running it.
4.1、使用
启动Launch a REPL (Read-Eval-Print-Loop).
$ babel-node
评估Evaluate code.
$ babel-node -e "class Test { }"
编译Compile and run test.js.
$ babel-node test
4.2、应用
$ babel-node [options] [ -e script | script.js ] [arguments]
When arguments for user script have names conflicting with node options, double dash placed before script name can be used to resolve ambiguities
$ babel-node --debug --presets es2015 -- script.js --debug
4.3、配置
| Option | Default | Description |
|---|---|---|
-e, --eval [script] |
Evaluate script | |
-p, --print |
Evaluate script and print result | |
-i, --ignore [regex] |
node_modules |
Ignore all files that match this regex when using the require hook |
-x, --extensions |
".js",".jsx",".es6",".es" |
List of extensions to hook into |
presets |
[] |
List of presets (a set of plugins) to load and use. |
plugins |
[] |
List of plugins to load and use. |
5、配置文件
创建 .babelrc配置文件，这里面可以放插件
你应该准确的告诉babel应该编译成什么东西
Great! You've configured Babel but you haven't made it actually do anything. Create a .babelrc config in your project root and enable some plugins.
Note
Pre-6.x, Babel enabled certain transformations by default. However, Babel 6.x does not ship with any transformations enabled. You need to explicitly tell it what transformations to run. The simplest way to do this is by using a preset, such as the ES2015 Preset.
6、预设(Presets)
babel已经为大家准备了一些预设插件，用来处理一些操作，比如es2015和react
es2015
react
7、Gulp中使用babel
https://github.com/babel/gulp-babel
8、webpack中使用babel
https://github.com/babel/babel-loader
9、其他
①我们如果不会用可以去github中搜索 gulp babel的快速开始文档，需要哪些知识点整合的就输入哪些关键字
②我们在搜索一些学习的博客和文章的时候，先看发表日期，这些开源项目现在更新的很快，有些东西的用法都改变了，最好跟着官网走
② http://blog.csdn.net/yczz/article/category/354754 这哥们的ria可以看一下