babel的編譯過程
⑴ webpack 怎麼直接實時編譯輸出文件
使用webpack編譯打包react是非常便捷的。這也是人們常用的一種方式。但是在使用過程中，一定要注意一個細節，那就是webpack和babel-loader的安裝位置。react安裝當然，使用react必須先安裝react和react-dom，其安裝方式很簡單（前提是我們必須安裝有npm）。#npminstallreactreact-dom–savereact安裝就這樣簡單，其實react和react-dom就是相當於js類庫。但是我們需要解析器來解析react的語法。react解析器babel安裝babel安裝的位置是我們這篇文章的目的。babel有兩種安裝的位置：一種是全局安裝，一種是本地安裝——也就是安裝在項目目錄下的node_moles下。#npminstallbabel-corebabel-loaderbabel-preset-react–save-dev//本地安裝#npminstallbabel-corebabel-loaderbabel-preset-react–g//全局安裝一般情況下我們選擇本地安裝，這樣便於管理。打包工具webpack的安裝同樣，webpack的安裝位置也是這篇文章描述的所要注意的點。當然，它也有兩種安裝的位置：全局安裝和本地安裝。#npminstallwebpack–save-dev//本地安裝#npminstallwebpack–g//全局安裝如果選擇本地安裝，那麼在使用的時候較麻煩一些，我們需要在命令前加上路徑。所以一般情況下都是全局安裝，這樣就可以在任意位置直接使用。這里我們選擇全局安裝。這樣才能出現我們將要說的問題。webpack配置文件編寫安裝完webpack以後，下面來編寫webpack配置文件webpack.config.js。這里我不寫全部，只寫載入loader部分。代碼一mole:{loaders:[{test:/\.js$/,loader:'babel',query:{presets:['react']}}]}編譯過程中出現的錯誤好了，到了關鍵的地方了。現在我們整個系統的配置是這樣的：babel安裝到本地，webpack安裝到全局位置，webpack配置文件如代碼一所示。接下來我們就要編譯打包我們的項目。#webpack執行該命令以後，你會發現出現如下的錯誤：ERRORin(webpack)/~/node-libs-browser/~/process/browser.jsMolebuildfailed:Error:Couldn'tfindpreset"react"relativetodirectory"/node/lib/node_moles/webpack/node_moles/node-libs-browser/node_moles/process"……這也就是說找不到babel-preset-react。好了，說了這么多終於在這里引出了我們將要討論的問題（這里大家不要嫌我啰嗦，為什麼出現這種問題，其原因總要弄清楚。什麼樣的配置會出現這種問題，了解以後才容易上手解決）。解決問題的方式出現上述問題以後，我們有這樣三種方式可以解決。方式一要解決這個問題很簡單。我們知道，出現這個問題是因為bable和webpack安裝的位置不同，所以找不到babel-preset-react。因為在配置文件中有這樣一段代碼。query:{presets:['react']}好了，既然知道是安裝位置不同，那我們可以將babel安裝在全局位置，這樣這個問題不就解決了嗎。#npmremovebabel-corebabel-loaderbabel-preset-react–save-dev//首先移除原先安裝的babel#npminstallbabel-corebabel-loaderbabel-preset-react–g//全局安裝沒錯，問題解決了。但是我們不推薦使用這種方式。因為這樣不便於管理，所以還是使用其他的方式。方式二此種方式和方式一大同小異。方式一是改變babel的安裝位置，而這里是改變webpack的安裝位置。原先webpack是安裝到全局位置的，所以找不到安裝到本地項目目錄下的babel-preset-react。因此我們可以改變webpack的位置。#npmremovewebpack–g//移除原先的webpack#npminstallwebpack–save-dev//將webpack安裝到本地位置——也就是項目目錄下的node_moles中#ln–s/項目根目錄/node_moles/webpack/bin/webpack.js/usr/bin/webpack//為了使用webpack方便，在這里我們在/usr/bin目錄下建立軟連接（也就是快捷方式）//這樣我們就可以在任意位置直接使用webpack命令了。此時我們已經改變了webpack的安裝位置。現在二者同在項目目錄下安裝。所以可以正確編譯了。此種方式較方式一，我個人比較推薦這種方式，這樣比較方便管理。但是，這種方式也不是沒有弊端。如果我們有多個項目，那我們就需要在每個項目下都安裝webpack，那豈不是很麻煩。所以這種方式也不是很好。方式三該方式應該說是最值得推薦的，因為不需要改變webpack和babel的安裝位置。webpack還是在全局位置，babel還是在本地項目位置下。我們需要做的就是修改webpack的配置文件，在代碼一的基礎上添加一句代碼。代碼二mole:{loaders:[{test:/\.js$/,loader:'babel',exclude:/node_moles/,query:{presets:['react']}}]}
⑵ 怎麼在webstorm上利用babel實現自動編譯es6文件
針對上面一些同學說的不會生成文件的問題：請檢查File-Watchers中Babel的Arguments，有一項presets的設置，把他更改為=es2015,詳細設置如下：$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets=es2015如果還不行，請安裝上面提示的安裝babel-cli和babel-preset-es2015到項目本地
⑶ 如何用babel來編譯ES6的代碼
習慣了WebStorm的話..我就假設題主會用Node.js和npm啦～
一句話總結：用WebStorm自帶的File Watcher功能+Babel實現自動轉換ECMAScript 6代碼為ES5代碼
我是這么配置的..就先新建一個Empty Project，然後在src目錄下新建了一個main.js；
// 這一步不是必須的 只是剛上手的話 從空項目開始自己配置會少很多干擾
Then..進入設置，把JavaScript language version改成ECMAScript 6；
再Then..寫一段ES6代碼
'use strict';
// node直接運行ES6代碼時，如使用了ES6的一些關鍵字，比如let，就需要嚴格模式，否則會報錯
// 這是沒有嚴格模式時候的錯誤提示
// SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
function* fibs() {// Generator Function
let a = 0;
let b = 1;
while (true) {
yield a;
// [a, b] = [b, a + b];
b = a + b;
a = b - a;
}
}
let [first, second, third, fourth, fifth, sixth] = fibs();
console.log(first, second, third, fourth, fifth, sixth);
現在IDE會出現一個File watcher提示條
先別點Add watcher！我們要先去裝babel～
首先在根目錄新建一個package.json
{
"name": "test-project",
"version": "1.0.0"
}
然後打開IDE的Terminal，安裝babel-cli
npm install --save-dev babel-cli
Good! 現在可以去點Add watcher啦，點完之後會彈出一個框，其中大部分設置IDE都幫你搞定了
下面第三行，Program那一項，填
$ProjectFileDir$/node_moles/.bin/babel
然後點OK，這個時候你就會發現左邊多出來一個main-compiled.js文件啦
但是還沒搞定！現在只是搞定了自動轉換的功能，系統默認把ES6 compile成了ES6..（你應該會發現compile出來的東西跟原來的一樣..Generator函數並沒有被轉換成ES5的格式）
所以我們需要安裝Babel的preset以正確識別ES6代碼；
和剛才一樣，在npm安裝babel的ES6的preset
npm install --save-dev babel-preset-es2015
在根目錄下新建一個.babelrc文件（就是babel在當前項目的配置文件），寫上
{
"presets": [
"es2015"
]
}
OK搞定！保存再回去看一下main-compiled.js 應該就變成這個樣子啦，現在你在main.js里直接寫ES6代碼，IDE都會自動compile成ES5的代碼在這里啦～
注意：想直接用Node.js運行ES6代碼還是有些問題..因為這段代碼用的ES6的解構賦值Node.js還未完全支持，需要在運行的時候加入一些tags（以開啟Node.js的相關試驗特性），具體可以參考Node.js官網對ES6的說明：ECMAScript 2015 (ES6)。
⑷ babel怎麼編譯箭頭函數
gulp
腳本中能不能使用箭頭函數取決於其運行環境，即
Node
的版本號。不過目前的版本應該都支持
ES6
語法。
gulp
本身不具備編譯
JS
的能力，肯定是通過第三方插件來編譯的，那麼要看你用的什麼插件以及什麼配置來編譯。
既然
webpack
直接可編譯，那麼使用
gulp
調用
webpack
來編譯就不應該出問題的。光從你提供的信息來看，目前也就只能這么回答了。
⑸ 如何使用babel來進行語法的編譯在這里可以看得到
編譯器H Builder的語法應該是Visual Basic的基本語法。在Visual Basic中的基本語句包括：一、賦值語句。賦值語句的語法如下：變數名或對象.屬性=表達式它的含義是把等號右邊的值賦給等號左邊的值。二、判定結構。一、If語句。用If...Then結構有條件地執行一個或多個語句。單行語法和多行塊語法都可以使用： If condition Then statement If condition Then Statements End If Condition 通常是比較式，但它可以是任何計算數值的表達式。Visual Basic 將這個值解釋為True或False：一個為零的數值為False，而任何非零數值都被看作True。若condition為True，則Visual Basic執行Then 關鍵字後面的所有statements。可以使用單行或多行語法有條件地執行一個語句。注意：If...Then的單行格式不用End If語句。如果condition為True時要執行多行代碼，則必須使用多行塊If...Then...End If語法。二、If...Then...Else語句。用If...Then...Else塊定義幾個語句塊，執行其中一個語句： If condition1 Then [statementblock-1] [ElseIf condition2 Then [statementblock-2]] ... [Else [statementblock-n]] End If Visual Basic首先測試condition1。如果它為False，Visual Basic就測試 condition2，依次類推，直到找到一個為True的條件。當它找到一個為 True的條件時，Visual Basic就會執行相應的語句塊，然後執行End If後面的代碼。作為一個選擇，可以包含Else語句塊，如果條件都不是True，則Visual Basic執行Else語句塊。 If...Then…ElseIf只是If...Then...Else的一個特例。注意，可以使用任意數量的 ElseIf子句，或者一個也不用。可以有一個Else子句，而不管有沒有ElseIf 子句。二、循環語句。電腦最擅長的就是不厭其煩地重復做一項工作成千上萬遍（即重復執行幾行代碼），這就是通過循環結構來完成的。VB支持的循環結構有：Do…Loop和For…Next。用Do循環重復執行一個語句塊，且重復次數不定。Do…Loop是以計算數值為條件以決定是否繼續執行。條件必須是一個數值或者值為True或False的表達式。在下面的Do…Loop循環中，只要條件為真就執行循環。 Do While 循環條件循環語句塊 Loop 當Visual Basic執行到這個Do循環時首先測試條件，條件為假時，跳過所有語句。如果條件為真，Visual Basic就會執行語句，退回到Do While語句測試條件。只要條件為真，循環可以隨意執行幾次。如果條件一開始便為假，則不會執行語句。還有一種Do…Loop語句，是先執行語句，每次執行之後測試條件，循環中的語句至少執行一次。 Do 循環語句塊 Loop While 循環條件在不知道循環要執行幾次語句時，用Do循環，知道循環次數時，可以使用For…Next循環。For循環使用一個叫做計數器的變數，重復一次循環之後，計數器的值會增加或減少。 For 計數器=初值To終止值Step增量循環語句塊 Next 計數器計數器、初值、終止值和增量為數值型。執行For循環時，設置計數器等於初值，測試計數器是否大於終止值，是則退出循環，執行循環語句，計數器增加增量後重復以上步驟。用Exit語句可以退出For循環、Do循環，它的語法是Exit Do和Exit For，在循環中出現的次數無限制。
⑹ babel怎麼編譯箭頭函數
gulp 腳本中能不能使用箭頭函數取決於其運行環境，即 Node 的版本號。不過目前的版本應該都支持 ES6 語法。
gulp 本身不具備編譯 JS 的能力，肯定是通過第三方插件來編譯的，那麼要看你用的什麼插件以及什麼配置來編譯。
既然 webpack 直接可編譯，那麼使用 gulp 調用 webpack 來編譯就不應該出問題的。光從你提供的信息來看，目前也就只能這么回答了。
⑺ 怎麼在webstorm上利用babel實現自動編譯es6文件
現階段，建議你直接考慮用gulp，利用gulp-babel轉es6。 畢竟一個團隊中不是每個人都是用的webstrom，還有畢竟後續es6不是你的唯一需求，比如你還需要webpack
現階段版本中轉es5後在IE8下還是有很多坑需要填，甚至有bug依然很難用常規手段解決，所以如果你們需要支持IE8不是很建議在實際項目中用babel。
⑻ Flask-Babel使用簡易教程(一)
本文參考 https://translations.readthedocs.io/en/latest/flask-babel.html 做了修改，如有疑問請指正。
修改如下：
在終l端執行 pybabel --list-locales 命令，查看本機支持的語言，發現中文支持是zh_Hans_CN，而非zh_CN。所以在以下文章中，把zh_CN做下修改即可。修改的地方有兩處，一處是命令，一處是文件。
Flask-Babel 是 Flask 的翻譯擴展工具。安裝命令如下：
pip install flask-babel
安裝它的時候會順便安裝 Babel 、 pytz 、 speaklater 這三個包，其中 Babel 是 python 的一個國際化工具包。pytz 是處理時區的工具包，speaklater 相當於是 Babel 的一個輔助工具，我們這里集中在翻譯流程上，這幾個工具就供以後進一步了解吧。
接下來我們做一個簡單的 Hello World 程序，新建一個叫 hello 的文件夾，在其中創建一個叫 hello.py 的文件，內容如下：
然後在 hello.py 的同一級目錄下創建一個叫 templates 的文件夾，在其中寫一個 index.html，內容如下：
很簡單的 Hello World 程序，接下來我們要做的是讓這個站變成中文站。
再接下來就是翻譯了。翻譯需要用到 flask-babel 這個 flask 擴展。首先我們將這個 app 「國際化」，為模板和 .py 文件中的每一個字元串添加一個 gettext 函數，由於 gettext 函數被引用的次數太多了，為了方便手寫，就將其 import 為 「_」：
然後修改模板：
你可以注意到我們對 app 的 locale 做了配置，然後用 babel 擴展將 app 再次初始化，並且將 .py 和 .html 中的字元串做了配置，讓它們都使用gettext這個函數。其中值得注意的是gettext的格式化字元串的參數。如果直接用類似"It's %s today"% day是不行的。
這么一來，app 的語言其實是被寫死成中文了。其實你可以在 flask 程序中讓用戶選擇自己喜好的語言，或者依據瀏覽器設置用戶優先顯示的語言，詳細做法可以參考官方文檔中提到localeselector的部分。
接下來我們要做的是 babel 的配置。在 hello.py 的同級目錄創建一個叫 babel.cfg 的文件，內容如下：
這樣 babel 就知道要從哪些位置搜索要翻譯的字元串了。然後我們用 pybabel 生成要翻譯的 PO 模板文件，這個命令是 babel 這個工具包帶來的，生成翻譯模板命令如下：
$ pybabel extract -F babel.cfg -o messages.pot .
注意結尾的點「.」，這個點表示當前目錄，目錄是 pybabel 必須的參數，官方文檔中缺少這個點，所以命令是無法執行成功的。messages.pot 就是我們生成的翻譯模板文件，內容大致如下：
# Translations template for PROJECT.
# Copyright (C) 2017 ORGANIZATION
# This file is distributed under the same license as the PROJECT project.
# FIRST AUTHOR , 2017.
#
#, fuzzy
msgid""
msgstr""
"Project-Id-Version: PROJECT VERSION\n"
"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
"POT-Creation-Date: 2017-03-22 13:46+0800\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME \n"
"Language-Team: LANGUAGE \n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Generated-By: Babel 2.3.4\n"
#: hello.py:10
msgid"Saturday"
msgstr""
#: templates/index.html:1
msgid"Flask International"
msgstr""
#: templates/index.html:2
msgid"Hello, World!"
msgstr""
#: templates/index.html:3
#, python-format
msgid"It's %(day)s today"
msgstr""
你可以修改里邊頭文件的信息，把個人和項目相關的資料加進去。
接下來我們創建中文翻譯：
$ pybabel init -i messages.pot -d translations -l zh_Hans_CN
這句命令會在 hello 文件夾中生成一個 translations 文件夾，要確保 flask 能找到翻譯內容，translations文件夾要和 templates 文件夾在同一個目錄中。接下來我們就可以進行翻譯了，修改translations/zh_Hans_CN/LC_MESSAGES/messages.po文件，將其中的內容翻譯過來：
# Chinese (Simplified, China) translations for PROJECT.
# Copyright (C) 2017 ORGANIZATION
# This file is distributed under the same license as the PROJECT project.
# FIRST AUTHOR , 2017.
#
msgid""
msgstr""
"Project-Id-Version: PROJECT VERSION\n"
"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
"POT-Creation-Date: 2017-03-22 13:46+0800\n"
"PO-Revision-Date: 2017-03-22 13:42+0800\n"
"Last-Translator: \n"
"Language: zh_Hans_CN\n"
"Language-Team: zh_Hans_CN \n"
"Plural-Forms: nplurals=1; plural=0\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Generated-By: Babel 2.3.4\n"
#: hello.py:10
msgid"Saturday"
msgstr"星期六"
#: templates/index.html:1
msgid"Flask International"
msgstr"Flask國際化"
#: templates/index.html:2
msgid"Hello, World!"
msgstr"哈嘍，世界"
#: templates/index.html:3
#, python-format
msgid"It's %(day)s today"
msgstr"今天是%(day)s"
PO文件的翻譯其實可以用專門的工具來編輯，比如 Poedit ，不過小文件直接手譯就可以了。
編譯翻譯結果
翻譯完後執行下面的命令，為其編譯出 message.mo 文件：
$ pybabel compile -d translations
如果上述命令無法生成 messages.mo 文件，那你需要將 message.po 中的#,fuzzy刪除。
然後就算基本完成了。這時執行 python hello.py 就會看到翻譯的中文頁面了。
有時我們需要對程序和模板做修改，翻譯也要隨之更新。更新後需要用前面的命令重新生成 messages.pot 文件，然後使用下面的命令將更新的內容 merge 到原來的翻譯中：
$ pybabel update -i messages.pot -d translations
最後再到對應 locale 的文件夾下更新翻譯並 compile 即可。
項目結構：
⑼ 詳解如何使用babel進行es6文件的編譯
我使用的是webpack + babel-loader來編譯它的，也許是webpack或者是babel的某個設定而不是ES6 import本身的，總之這樣是可以用的！
⑽ 怎麼在webstorm上利用babel實現自動編譯es6文件
eisneim，不愛健身的設計師不是好的程序員…我最近用的就是是IOjs+koa+babel來開發項目的，我就用了babel來支持arrowfunction=>以及其他的ES6特性，Promise，generator這些iojs都支持的很好的。在用babel的時候不管是使用hook，還是生成compile文件或者是結合到mocha,gulp中去的時候都可以設置blacklist，就是不用的那些transformer，文檔自己看；