Babel

webpack執行Babel教程

Google+ Pinterest LinkedIn Tumblr

摘要:Babel是轉碼器,webpack是打包工具,它們應該如何一起使用呢?

  • GitHub倉庫: Fundebug/webpack-babel-tutorial

webpack執行Babel教程

ES6 + IE10 = 語法錯誤!

test.js 使用了ES6的 箭頭函式 :

setTimeout(() =>
{
    console.log("Hello, Fundebug!");
}, 100)

由於低版本的瀏覽器沒有支援ES6語法,這就意味著程式碼會出錯。例如,在IE 10瀏覽器中,會出現」語法錯誤」:

webpack執行Babel教程

如果你使用了Fundebug錯誤監控服務,則會收到這樣的報錯:

webpack執行Babel教程

直接使用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行程式碼。

參考

  • webpack 配合babel 將es6轉成es5 超簡單例項
  • Babel入門教程
  • babel-preset-env: a preset that configures Babel for you
版權宣告:
轉載時請註明作者<b><a href="https://fundebug.com" target="_blank" title="Fundebug">Fundebug</a></b>以及本文地址:
<b><a href="https://blog.fundebug.com/2018/06/13/webpack-babel-tutorial/" target="_blank" title="webpack執行Babel教程">https://blog.fundebug.com/2018/06/13/webpack-babel-tutorial/</a></b>

Write A Comment