Tool系列—Babel

一、簡單介紹

     這些轉換器 (更準確地說是源代碼到源代碼的編譯器) 能夠把你寫的符合 ECMAScript 6 標準的代碼完美地轉換爲 ECMAScript 5 標準的代碼，而且能夠確保良好地運行在全部主流 JavaScript 引擎中。

    Babel對 ES6 的支持程度比其它同類更高，並且 Babel 擁有完善的文檔和一個很棒的    在線交互式編程環境。

二、學習資料

Babel官網

http://babeljs.io/docs/setup/

三、Babel介紹

    babel能夠驚醒單獨使用。

3.一、環境安裝

npm install --global babel-cli

3.二、編譯單獨文件

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.三、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.四、編譯文件夾

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.五、管道文件（Piping Files）（應用場景不太清楚）

Pipe a file in via stdin and output it to script-compiled.js

$ babel --out-file script-compiled.js < script.js

四、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.一、使用

    啓動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.二、應用

$ 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.三、配置

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.

五、配置文件

    建立 .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.

六、預設(Presets)

    babel已經爲你們準備了一些預設插件，用來處理一些操做，好比es2015和react

• es2015

• react

七、Gulp中使用babel

https://github.com/babel/gulp-babel

八、webpack中使用babel

https://github.com/babel/babel-loader

九、其餘

①咱們若是不會用能夠去github中搜索 gulp  babel的快速開始文檔，須要哪些知識點整合的就輸入哪些關鍵字

②咱們在搜索一些學習的博客和文章的時候，先看發表日期，這些開源項目如今更新的很快，有些東西的用法都改變了，最好跟着官網走

②  http://blog.csdn.net/yczz/article/category/354754  這哥們的ria能夠看一下