babel安裝

你們都知道目前ＥＳ６不是瀏覽器所有都是支持的，因此要經過轉碼器先進行轉碼而後再編譯代碼。當心在學習ＥＳ６以前先安裝了ｂａｂｅｌ轉碼器，雖然當時安裝的時候困難重重，遺憾的是沒有把解決方案總結一下，別人詢問的時候又要從新查一次，汗！！廢話很少說了。。。。。。

babel安裝

若是你還沒安裝 Babel 可使用 npm （用ｃｍｄ或者是git bash）來安裝：

npm install -g babel

 

可是通常都不會安裝成功，由於如今默認安裝的是babel6 因此這個命令不會成功。

如今使用es6的安裝方法：安裝babel-core和babel-cli

npm install babel-cli -g

npm install babel-core --save-dev

使用babel --help 查看是否已經安裝好了：沒有安裝成功通常都會提示安裝，這個時候建議換一個網速快的地方

通常安裝成功的話會有一大堆顯示出來，如果只有四、5行抱歉安裝失敗了。這個通常都是你的網速不行，能夠換個

babel5 和 babel6 的區別

對於Babel來講，如今有了兩個版本，一個是5，一個是6，那麼二者有什麼區別呢？

• 5對新手更加友好，由於只須要安裝一個babel就能夠了，而6須要安裝比較多的東西和插件才能夠。
• 相比5來講，6將命令行工具和API分開來了，最直觀的感受就是，當你想在代碼中運行es6代碼的話，須要安裝babel-core，而若是你想在終端編譯es6或者是運行es6版本的REPL的話，須要安裝babel-cli
• 也許有人問，原先的babel去哪了？是這樣的，這個babel的package到了6版本以後雖然仍是能安裝，可是已經不具備任何的有效的代碼了。取而代之的是一段提示文字，提示你須要安裝babel-core或者babel-cli。因此你在babel6的狀況下，徹底不須要安裝babel
• 6將babel插件化，當你第一次安裝babel-core而且按照之前的方式來加載require hook的話，你回發現代碼沒法運行：

  require('babel-core/register');

就是由於babel6總體插件化了，若是你想使用es6語法，須要手動加載相關插件。

如今安裝babel的預編譯文件

本身新建一個文件夾

在文件下用git bash打開或者是cmd跳到當前文件夾下面

使用命令：
npm install babel-preset-es2015
npm install babel-preset-react
npm install babel-preset-stage-1

這時你會看到你的文件夾下面多了node_modules文件夾

接着寫它的配置文件.babelrc（與node_modules在同一目錄下）

由於這個文件是沒有命名的，因此要經過cmd建立文件命令：

fsutil file createnew d:\.babelrc 1000

這樣babel就可使用了，能夠本身建立一個js文件使用babel-node等命令測試一下

 

在git bash 上運行babel慢的要命，做爲一個程序員是極度沒法容忍的，因此推薦使用webstrom安裝插件使用或者是在sublime中配置編譯環境使用

建立Sublime Text編譯系統

選擇菜單Tools –> Build System –> new Build System…

中文版的話是工具 –> 編譯系統 –> 新建編譯系統…

而後寫以下配置：

{ "working_dir": "${project_path:${folder}}", "selector": "source.js", "encoding": "utf-8", "shell": true, "windows": { "cmd": ["taskkill /f /im node.exe >nul 2>nul & babel-node $file"] }, "osx": { "cmd": ["killall node >/dev/null 2>&1; babel-node $file"] }, "linux": { "cmd": ["killall node >/dev/null 2>&1; babel-node $file"] } }

接着保存爲javascript.sublime-build，保存位置默認便可。

 

webstrom 默認使用babel

http://blog.drawable.de/2015/02/27/es6-in-webstorm-9-setting-up-a-filewatcher/