摘要: Babel是轉碼器，webpack是打包工具，它們應該如何一起使用呢?
- GitHub倉庫：Fundebug/webpack-babel-tutorial
ES6 + IE10 = 語法錯誤!
setTimeout(() =>
{
console.log("Hello, Fundebug!");
}, 100)
複製程式碼由於低版本的瀏覽器沒有支援ES6語法，這就意味著程式碼會出錯。例如，在IE 10瀏覽器中，會出現"語法錯誤"：
如果你使用了Fundebug錯誤監控服務，則會收到這樣的報錯：
直接使用babel轉碼
當你使用更高版本的JavaScript語法時，比如ES7，低版本的瀏覽器將無法執行。為了相容低版本的瀏覽器，比如萬惡的IE，我們不得不使用Babel，將ES6、ES7等高版本程式碼轉換為ES5程式碼。
安裝babel-cli
sudo npm install --global babel-cli
複製程式碼使用babel命令轉碼
babel test.js --out-file compiled.js
複製程式碼轉碼之後生成的程式碼為compiled.js：
setTimeout(function () {
console.log("Hello, Fundebug!");
}, 100);
複製程式碼可知，箭頭函式轉換成了function，這樣就程式碼可以在IE 10等不支援ES6的瀏覽器上正確執行了。
廣告：歡迎免費試用Fundebug，助您第一時間發現程式碼BUG。
使用webpack執行Babel
一般專案中都會使用webpack對程式碼進行打包，比如，將多個js檔案打包成1個js檔案，這樣可以減少前端的資源請求。因此，我們需要將Babel也整合到webpack中。
安裝webpack
npm install --global webpack
複製程式碼我使用的webpack版本為4.10.0
webpack --version
4.10.0
複製程式碼安裝babel
npm install --save-dev babel-cli babel-preset-env
複製程式碼babel-preset-env是Babel新版的preset，它可以讓我們靈活地設定程式碼目標執行環境，比如只支援各個瀏覽器最新的2個版本，支援IE8及其以上的IE瀏覽器。
安裝babel-loader
npm install --save-dev babel-loader
複製程式碼babel-loader是webpack的babel外掛，它讓我們可以在wepback中執行Babel。
配置babel
新增.babelrc檔案：
{
"presets": ["env"]
}
複製程式碼配置webpack
新增webpack.config.js檔案：
module.exports = {
entry: './test.js',
output:
{
path: __dirname,
filename: 'bundle.js'
},
module:
{
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
}
};
複製程式碼可知，我們在webpack中使用了babel-loader外掛來執行Babel，轉換所有的.js程式碼(除了node_modules中的程式碼)。
使用webpack執行babel
webpack --mode production
複製程式碼轉換之後的程式碼為bundle.js。bundle.js只有1行程式碼，這是因為為我們指定的mode為production，webpack為了壓縮程式碼只生成了1行程式碼。
參考
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了7億+錯誤事件，得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！
版權宣告
轉載時請註明作者Fundebug以及本文地址：
blog.fundebug.com/2018/06/13/…