iT邦幫忙

2024 iThome 鐵人賽

DAY 11
0

之前使用過的版本是舊版的,當時並沒有 tsconfig.app.jsontsconfig.node.json 這兩個配置檔案。後來我在 Stack Overflow 上面看到這篇文章,並結合其他資料進行查詢,得出了以下結論。

讓我們用最簡單的方式來區分這兩個檔案的用途:

  1. tsconfig.app.json:這個檔案主要負責前端的開發配置。正如我們之前提到的,瀏覽器無法直接讀懂 TypeScript,因此需要將它編譯成 JavaScript,而這個檔案就是用來配置 TypeScript 如何將前端代碼編譯成 JavaScript 的。
  2. tsconfig.node.json:這個檔案主要是針對 Node.js 環境的配置。Vite 是基於 Node.js 的構建工具,開發伺服器和打包功能都在 Node.js 環境中運行,因此這個檔案用來配置在 Node.js 環境中運行的 TypeScript 設置。

為什麼要分為兩個配置檔呢?

根據上面的說明,聰明的你應該已經猜到了。前端應用程式與 Vite 的運行環境不同,前端代碼運行在瀏覽器中,而 Vite 本身則運行在 Node.js 環境中。將配置檔分開不僅能提高靈活性和可維護性,還能讓每個環境的 TypeScript 設置針對其特定需求進行優化,特別是在大型項目中,這樣的劃分可以減少混淆。


配置檔內容

下面我們來解釋一些配置檔中的關鍵設置:

tsconfig.app.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

  1. target: ES2020
    將編譯目標設為 ES2020,這意味著編譯後的 JavaScript 可以使用 ES2020 的語法特性。這確保在現代瀏覽器中,代碼可以被正常解讀和執行。
  2. lib: ["ES2020", "DOM", "DOM.Iterable"]
    定義了編譯時所依賴的標準庫,包括 ES2020 的標準庫、DOM 和 DOM.Iterable。這些是前端應用程式在瀏覽器中運行所需的核心 API。
  3. module: ESNext
    使用最新的 ECMAScript 模組標準,這對於現代瀏覽器和打包工具(如 Vite、Webpack)來說是最佳選擇。
  4. jsx: react-jsx
    設置為 react-jsx,這意味著 TypeScript 將使用 React 17+ 的 JSX 轉換機制,不再需要顯式導入 React。它自動處理 JSX 語法並轉換為 React 元素。
  5. moduleResolution: bundler,
    使用打包工具模式來解析模組,適用於 Vite、Webpack 等工具。
  6. include: ["src"]
    告訴 TypeScript 只編譯 src 資料夾下的文件,這通常是前端應用程式的主要代碼目錄。

tsconfig.node.json

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["vite.config.ts"]
}

  1. target: ES2022
    編譯目標設為 ES2022,這意味著支持更現代的 ECMAScript 語法特性,比如 top-level await。
  2. lib: ["ES2023"]
    使用 ES2023 標準庫,這允許 Node.js 使用最新的 JavaScript 特性,無需考慮瀏覽器的兼容性。
  3. module: ESNext
    使用 ECMAScript 模組標準,適用於 Node.js 環境。
  4. include: ["vite.config.ts"]
    告訴 TypeScript 這個配置檔只處理 vite.config.ts,這類文件屬於 Node.js 執行環境。

在剛開始接觸時,這些配置檔案看起來可能會讓人覺得很複雜,牽涉到許多技術層面,但不用太擔心。Vite 為我們提供的預設配置已經非常完善,大部分情況下你可以直接使用這些預設值進行開發,只有在遇到特殊需求時才需要進行自訂修改。


【 補充 】react-jsx

在舊版本的 React 中,每個 JSX 文件都需要顯式地 import React from 'react' 來處理 JSX。React 17 引入了新功能,現在不再需要手動導入 React。react-jsx 設定會自動處理 JSX 語法的轉換過程,無需顯式導入 React 元素,也可以正常工作。


上一篇
【 Day 10 】建立 React - TypeScript 專案
下一篇
【 Day 12 】TypeScript - Strict Mode
系列文
React 開發者的 TypeScript 探索之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言