透過 TypeScript 和 webpack 建立網頁應用程式 • 處理 TypeScript

9 透過 TypeScript 和 webpack 建立網頁應用程式

9.1 必要的知識
9.2 限制
9.3 儲存庫 ts-demo-webpack
9.4 package.json
9.5 webpack.config.js
9.6 tsconfig.json
9.7 index.html
9.8 main.ts
9.9 安裝、建置和執行網頁應用程式
- 9.9.1 在 Visual Studio Code 中建置
9.10 在沒有載入器的情況下使用 webpack：webpack-no-loader.config.js

本章說明如何透過 TypeScript 和 webpack 建立網頁應用程式。我們只會使用 DOM API，而不是特定的前端架構。

GitHub 儲存庫：ts-demo-webpack

儲存庫 ts-demo-webpack 是我們在本章中使用的，可以從 GitHub 下載。

9.1 必要的知識

您應該大致熟悉

npm
webpack

9.2 限制

在本章中，我們堅持 TypeScript 最佳支援的內容：CommonJS 模組，打包為腳本檔案。

9.3 儲存庫 `ts-demo-webpack`

儲存庫 ts-demo-webpack 的結構如下

ts-demo-webpack/
  build/   (created on demand)
  html/
    index.html
  package.json
  ts/
    src/
      main.ts
  tsconfig.json
  webpack.config.js

網頁應用程式建置方式如下

輸入
- ts/ 中的 TypeScript 檔案
- 所有透過 npm 安裝並由 TypeScript 檔案匯入的 JavaScript 程式碼
- html/ 中的 HTML 檔案
輸出 – 目錄 build/，其中包含完整的網頁應用程式
- TypeScript 檔案編譯為 JavaScript 程式碼，與 npm 安裝的 JavaScript 結合，並寫入腳本檔案 build/main-bundle.js。這個程序稱為綑綁，而 main-bundle.js 是綑綁檔案。
- 每個 HTML 檔案都會複製到 build/。

這兩個輸出工作都由 webpack 處理

將 html/ 中的檔案複製到 build/ 中是透過 webpack 外掛程式 copy-webpack-plugin 來完成的。
本章節探討兩種不同的套件化工作流程
- Webpack 直接將 TypeScript 檔案編譯到套件中，並在 載入器 ts-loader 的協助下完成。
- 或者我們自行將 TypeScript 檔案編譯到 dist/ 目錄中的 JavaScript 檔案（就像我們在前一章節中所做的那樣）。然後 webpack 就無需載入器，而僅套件化 JavaScript 檔案。
本章節的大部分內容都是關於使用 webpack 搭配 ts-loader。在最後，我們會簡要地探討另一種工作流程。

9.4 `package.json`

package.json 包含專案的元資料

{
  "private": true,
  "scripts": {
    "tsc": "tsc",
    "tscw": "tsc --watch",
    "wp": "webpack",
    "wpw": "webpack --watch",
    "serve": "http-server build"
  },
  "dependencies": {
    "@types/lodash": "···",
    "copy-webpack-plugin": "···",
    "http-server": "···",
    "lodash": "···",
    "ts-loader": "···",
    "typescript": "···",
    "webpack": "···",
    "webpack-cli": "···"
  }
}

屬性的運作方式如下

"private": true 表示如果我們未提供套件名稱和套件版本，npm 就不會抱怨。
指令碼
- tsc, tscw：這些指令碼直接呼叫 TypeScript 編譯器。如果我們使用 webpack 搭配 ts-loader，就不需要它們。但是，如果我們使用 webpack 而不用 ts-loader（如本章節最後所示），它們會很有用。
- wp：執行 webpack 一次，編譯所有內容。
- wpw：在監控模式下執行 webpack，它會監控輸入檔案，並僅編譯變更的檔案。
- serve：執行伺服器 http-server，並使用已完全組裝的網路應用程式提供 build/ 目錄。
相依性
- 四個與 webpack 相關的套件
  - webpack：webpack 的核心
  - webpack-cli：核心的命令列介面
  - ts-loader：.ts 檔案的 載入器，將其編譯為 JavaScript
  - copy-webpack-plugin：一個 外掛程式，用於將檔案從一個位置複製到另一個位置
- ts-loader 所需：typescript
- 提供網路應用程式：http-server
- TypeScript 程式碼所使用的函式庫加上類型定義：lodash、@types/lodash

9.5 `webpack.config.js`

這是我們設定 webpack 的方式

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  ···
  entry: {
    main: "./ts/src/main.ts",
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: "[name]-bundle.js",
  },
  resolve: {
    // Add ".ts" and ".tsx" as resolvable extensions.
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: "ts-loader" },
    ],
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: './html',
      }
    ]),
  ],
};

屬性

entry：進入點 是 webpack 開始收集輸出套件資料的檔案。首先，它將進入點檔案新增到套件中，然後是進入點的匯入，接著是匯入的匯入，依此類推。屬性 entry 的值是一個物件，其屬性金鑰指定進入點的名稱，而其屬性值指定進入點的路徑。
output 指定輸出套件的路徑。當有多個進入點（因此有多個輸出套件）時，[name] 特別有用。組裝路徑時，它會替換為進入點的名稱。
resolve 設定 webpack 如何將模組的規格符（ID）轉換為檔案位置。
module 設定載入器（處理檔案的附加元件）等。
plugins 設定附加元件，它可以用各種方式變更和擴充 webpack 的行為。

如需有關設定 webpack 的更多資訊，請參閱 webpack 網站。

9.6 `tsconfig.json`

這個檔案設定 TypeScript 編譯器

{
  "compilerOptions": {
    "rootDir": "ts",
    "outDir": "dist",
    "target": "es2019",
    "lib": [
      "es2019",
      "dom"
    ],
    "module": "commonjs",
    "esModuleInterop": true,
    "strict": true,
    "sourceMap": true
  }
}

如果我們使用 webpack 搭配 ts-loader，就不需要 outDir 選項。不過，如果我們在沒有載入器的狀況下使用 webpack（如本章稍後說明），就需要它。

9.7 `index.html`

這是網頁應用程式的 HTML 頁面

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ts-demo-webpack</title>
</head>
<body>
  <div id="output"></div>
  <script src="main-bundle.js"></script>
</body>
</html>

ID 為 "output" 的 <div> 是網頁應用程式顯示其輸出的位置。main-bundle.js 包含已套件的程式碼。

9.8 `main.ts`

這是網頁應用程式的 TypeScript 程式碼

import template from 'lodash/template';

const outputElement = document.getElementById('output');
if (outputElement) {
  const compiled = template(`
    <h1><%- heading %></h1>
    Current date and time: <%- dateTimeString %>
  `.trim());
  outputElement.innerHTML = compiled({
    heading: 'ts-demo-webpack',
    dateTimeString: new Date().toISOString(),
  });
}

步驟 1：我們使用 Lodash 的函式 template() 將具有自訂範本語法的字串轉換為函式 compiled()，它將資料對應至 HTML。這個字串定義兩個要透過資料填入的空白
- <%- heading %>
- <%- dateTimeString %>
步驟 2：將 compiled() 套用至資料（具有兩個屬性的物件）以產生 HTML。

9.9 安裝、建置和執行網頁應用程式

首先，我們需要安裝網頁應用程式所依賴的所有 npm 套件

npm install

然後，我們需要透過 package.json 中的指令碼執行 webpack（已在先前步驟中安裝）

npm run wpw

從現在開始，webpack 會監控儲存庫中的檔案是否有變更，並在偵測到任何變更時重新建置網頁應用程式。

在另一個命令列中，我們現在可以啟動一個網頁伺服器，在 localhost 上提供 build/ 的內容

npm run serve

如果我們前往 Web 伺服器列印出的 URL，便可以看到 Web 應用程式執行中。

請注意，由於快取，單純重新載入可能不足以在變更後看到結果。您可能必須在重新載入時按下 Shift，強制重新載入。

9.9.1 在 Visual Studio Code 中建置

除了從命令行建置之外，我們也可以透過所謂的建置工作，在 Visual Studio Code 中執行建置

從「終端機」功能表執行「組態預設建置工作…」。
選擇「npm: wpw」。
問題比對器會將工具輸出轉換成問題清單（資訊、警告和錯誤）。預設值在此情況下運作良好。如果您想要明確指定，可以在 .vscode/tasks.json 中指定值
```
"problemMatcher": ["$tsc-watch"],
```

我們現在可以從「終端機」功能表中的「執行建置工作…」開始 webpack。

9.10 不使用載入器使用 webpack：`webpack-no-loader.config.js`

除了使用 ts-loader 之外，我們也可以先將 TypeScript 檔案編譯成 JavaScript 檔案，然後透過 webpack 將它們打包。這兩個步驟的第一個步驟如何運作，已在前一章節中說明。

我們現在不必組態 ts-loader，而且我們的 webpack 組態檔會更簡單

const path = require('path');

module.exports = {
  entry: {
    main: "./dist/src/main.js",
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name]-bundle.js',
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: './html',
      }
    ]),
  ],
};

請注意，entry.main 不同。在另一個組態檔中，它是

"./ts/src/main.ts"

我們為什麼要在打包之前產生中間檔案？一個好處是，我們可以使用 Node.js 為一些 TypeScript 程式碼執行單元測試。

9 透過 TypeScript 和 webpack 建立網頁應用程式

9.1 必要的知識

9.2 限制

9.3 儲存庫 ts-demo-webpack

9.4 package.json

9.5 webpack.config.js

9.6 tsconfig.json

9.7 index.html

9.8 main.ts