在舊版瀏覽器上使用 ES6+

Mithril.js 是用 ES5 編寫的，但它也完全相容於 ES6 及更高版本。所有現代瀏覽器都原生支援它，甚至包括原生模組語法（它們僅支援相對路徑和 URL 路徑）。因此，你可以隨意使用箭頭函式來建立閉包元件，以及使用類別來建立類別元件。

然而，如果像我們中的許多人一樣，你仍然需要支援像 Internet Explorer 這樣的舊版瀏覽器，那麼你需要將程式碼轉譯為 ES5。本頁將說明如何使用 Babel 將現代 ES6+ 程式碼轉換為可在舊版瀏覽器上運作的版本。

設定

首先，如果尚未安裝 Node，請確保已安裝。Node 預先捆綁了 npm，這是我們稍後會用到的工具。

下載完成後，開啟終端機並執行以下命令：

bash

# 請將此替換為你的專案的實際路徑。路徑若包含空格，請用雙引號括住。在 Linux/Mac 環境下，若路徑包含 `$$` 符號，則使用單引號。
cd "/path/to/your/project"

# 如果你已經有一個 `package.json`，請跳過此命令。
npm init

現在，你可以選擇幾種不同的方式：

完全不使用打包工具，單獨使用 Babel
使用 Babel 並使用 Webpack 打包

單獨使用 Babel

首先，我們需要安裝一些依賴項。

@babel/cli 安裝核心 Babel 邏輯以及 babel 命令。
@babel/preset-env 幫助 Babel 了解要轉譯哪些語法以及如何轉譯。

bash

npm install @babel/cli @babel/preset-env --save-dev

現在，創建一個 .babelrc 檔案並使用 @babel/preset-env 進行設定。

json

{
  "presets": ["@babel/preset-env"],
  "sourceMaps": true
}

最後，如果你對需要支援的瀏覽器有_非常_具體的要求，你可能需要設定 Browserslist，以便 Babel（和其他函式庫）知道要針對哪些瀏覽器進行轉譯。

預設情況下，如果你不設定任何內容，Browserslist 會使用一個相當合理的查詢：> 0.5%, last 2 versions, Firefox ESR, not dead。除非你有非常特殊的情況需要你更改此設定，例如你需要使用大量 polyfill 支援 IE 8，否則不要費心執行此步驟。

每當你想編譯你的專案時，執行此命令，所有內容都將被編譯。

bash

babel src --out-dir dist

使用 npm 腳本可以簡化操作，避免重複輸入指令。將 "build" 欄位新增到 package.json 中的 "scripts" 物件：

json

{
  "scripts": {
    "build": "babel src --out-dir dist"
  }
}

現在，該命令更容易輸入和記住。

bash

npm run build

使用 Babel 和 Webpack

如果你想使用 Webpack 進行打包，則需要更多步驟來設定。首先，我們需要安裝 Babel 和 Webpack 所需的所有依賴項。

webpack 是核心 Webpack 程式碼，webpack-cli 為你提供 webpack 命令。
@babel/core 是核心 Babel 程式碼，是 babel-loader 的必要相依套件。
babel-loader 讓你可以設定 Webpack 使用 Babel 來轉譯你的檔案。
@babel/preset-env 幫助 Babel 了解要轉譯哪些語法以及如何轉譯。

bash

npm install webpack webpack-cli @babel/core babel-loader @babel/preset-env --save-dev

現在，創建一個 .babelrc 檔案並使用 @babel/preset-env 進行設定。

json

{
  "presets": ["@babel/preset-env"],
  "sourceMaps": true
}

接下來，如果你對需要支援的瀏覽器有_非常_具體的要求，你可能需要設定 Browserslist，以便 Babel（和其他函式庫）知道要針對哪些瀏覽器進行轉譯。

最後，通過創建一個名為 webpack.config.js 的檔案來設定 Webpack。

javascript

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /\/node_modules\//,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

此配置假設應用程式的原始碼入口點檔案位於 src/index.js 中，並將打包後的檔案輸出到 dist/app.js。

現在，要執行打包工具，你只需執行以下命令：

bash

webpack -d --watch

你可能會發現使用 npm 腳本很方便，這樣你就不必記住這個命令並每次都輸入它。將 "start" 欄位新增到 package.json 中的 "scripts" 物件：

json

{
  "scripts": {
    "start": "webpack -d --watch"
  }
}

現在，該命令更容易輸入和記住。

bash

npm start

對於正式環境，你需要壓縮你的程式碼。幸運的是，這也很容易：只需使用不同的選項執行 Webpack 即可。

bash

webpack -p

你可能還想將其添加到你的 npm 腳本中，以便你可以快速輕鬆地建置它。

json

{
  "scripts": {
    "start": "webpack -d --watch",
    "build": "webpack -p"
  }
}

然後，運行這個命令更容易記住。

bash

npm run build

若使用 Heroku，配置可能如下所示：

json

{
  "scripts": {
    "start": "webpack -d --watch",
    "build": "webpack -p",
    "heroku-postbuild": "webpack -p"
  }
}

在舊版瀏覽器上使用 ES6+ ​

設定 ​

單獨使用 Babel ​

使用 Babel 和 Webpack ​

在舊版瀏覽器上使用 ES6+

設定

單獨使用 Babel

使用 Babel 和 Webpack