iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0
Modern Web

Webpack with ASP.NET MVC系列 第 7

Babel 設定

關於 Babel

看一下 Babel 官網上的定義,馬上就能明白 Babel 的功用。

https://i.imgur.com/QyS97zI.png

在 ES6 之後,ECMAScript 版本每年都會更新,2018 年已經來到 ES9 了。而 Babel 可以將新版的 ES 功能轉譯為 ES5,這樣舊版的瀏覽器才能夠正常運作。

Babel 的功用很清楚,但究竟該怎麼配置一直都是一知半解。比如:

  • Presets 該怎麼設定?
  • 專案要使用 Decorator Babel 該怎麼設定?
  • babel-polyfilltransform-runtime 又是甚麼?

這次為了導入 Webpack 有稍微做一下功課,整理如下

先認識一下 ECMAScript

ECMAScript是一種由 Ecma 國際(前身為歐洲電腦製造商協會)通過 ECMA-262 標準化的指令碼程式設計語言。 ( Wikipedia )

Javascript 就是基於 ECMAScript 實作的語言,ECMAScript 標準分為幾個階段:

  • Stage 0 - Strawman ( 展示階段 )
  • Stage 1 - Proposal ( 徵求意見階段 )
  • Stage 2 - Draft ( 草案階段 )
  • Stage 3 - Candidate ( 候選階段 )
  • Stage 4 - Finished ( 定案階段 )
    ( 參考自 ECMAScript 6 入门 - 阮一峰 )

理解 ECMAScript 標準,以後在專案中使用新版 ES 功能,只要根據該功能目前在ECMAScript 標準中處在哪個階段,Babel 在調整相對應的配置即可。不清楚功能是在哪個階段可以到這邊查詢 ECMAScript proposals

Babel 介紹

先介紹一下 Babel 各個模組

babel-core

Babel 的核心模組,提供 Babel 核心 API 給其它 Plugin 使用。

babel-cli

可以透過 command Line 執行 Babel 轉譯作業

babel-polyfill

Babel 處理轉譯 ES5 的流程時,只是處理語法上的轉譯,比如 const、let 轉譯為 var 或是箭頭函式轉譯為 function。若是像 Promise 這種新版的 API 功能,就須要透過 babel-polyfill 提供的功能才能實現。

babel-preset-env

透過 presets 的設定,就可以使用 Babel 幫我們配置好的一些功能。網路上會找到一些 babel-preset-es2015 / es2016 / es2017 的配置,官方已經建議廢棄了,目前官方唯一推薦的就是 babel-preset-env

babel-preset-react

專案使用 React 需要配置這個功能。

babel-preset-stage-1

包含 preset-stage-2、preset-stage-3 等功能,因為我們專案有使用到 transform-export-extensions 這個功能,所以需要配置。

export Product from 'Product'

等價於

import Product from 'Product'
export Product

babel-loader

將 Babel 轉譯的功能,集成到 Webpack 打包流程。

總結

專案配置如下

.babelrc

{
  presets: [
    [
      'env',
      {
        debug: false,
        useBuiltIns: true,
        modules: false
      }
    ],
    'react',
    'stage-0'
  ],
  plugins: ['transform-decorators-legacy']
}

webpack.common.js

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      include: path.join(__dirname, 'Resource'),
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        query: {
          cacheDirectory: './Resource/Webpack_cache/'
        },
      }
    }
  ]
}

上一篇
Webpack 設定檔配置 Common / Dev / Prod
下一篇
頁面緩存設定
系列文
Webpack with ASP.NET MVC30

尚未有邦友留言

立即登入留言