TypeScript+Webpack+React元件庫開發採坑實記

黃Java發表於2019-03-04
TypeScriptWebReact元件

概述

本文為配置TypeScript+Webpack+React，開發UI元件庫時遇到的坑以及相對應的解決方案記錄，適合相關同學進行查閱解決問題。

本文主要內容為：

  • tsconfig.js配置中遇到的問題
  • 選擇TypeScript Loader遇到的問題
  • Webpack遇到的問題

此三類配置和選擇會同時導致某一類問題，因此這三類不作為分類標準，僅作為讀者思考的方向，我們下面會根據具體的問題和錯誤以及對應的解決方案來進行說明。

本文只需略讀，在遇到相對應問題時，能夠知道此處有提供相對應解決方案可以供嘗試即可。

開發中遇到的問題

在專案中使用Webpack對應的alias

在使用TypeScript時，如果需要使用alias功能，有以下兩種方法。相關解決方案參考Stack Overflow上面的回答，不過此回答仍然有部分內容沒有考慮到，我們將在下面介紹時進行說明。

使用ts-loader

使用ts-loader作為loader來編譯TypeScript時，你需要在TypeScript中配置baseUrl和paths，具體配置可以參考下面示例：

{
    "baseUrl": ".",
    "paths": {
        "Src/*": [
            "src/*"
        ],
        "Interfaces/*": [
            "src/interfaces/*"
        ],
        "Components/*": [
            "src/components/*"
        ],
        "Utils/*": [
            "src/utils/*"
        ]
    }
}
複製程式碼

注：在paths中，絕對路徑不允許以@開頭，如：將@utils的絕對路徑解析到src/utils中。

在tsconfig.json配置完成後，使用TsConfigPathsPlugin外掛來讀取相關配置檔案到webpack.config.js中，官方示例配置如下：

const TsconfigPathsPlugin = require(`tsconfig-paths-webpack-plugin`);

module.exports = {
  ...
  resolve: {
    plugins: [new TsconfigPathsPlugin({ /*configFile: "./path/to/tsconfig.json" */ })]
  }
  ...
}
複製程式碼

通過這種方法，使用ts-loader就能夠使用alias功能了。

使用awesome-typescript-loader

推薦使用此loader來編譯TypeScript，速度相較於ts-loader來說，肉眼可見的快。

在使用awesome-typescript-loader時，在Stack Overflow的回答中說這個外掛會將tsconfig.json中的配置檔案自動新增到Webpack中。經過實踐發現，當絕對路徑最終引用的檔案是一個Interface時，只需要在tsconfig.js中進行指定即可找到相對應檔案。

當絕對路徑最終引用的檔案是一個Function時，如果不指定webpack alias欄位，則會出現相關錯誤，如Module not found: Error: Can`t resolve `Utils/handle-url`。需要解決此問題，只需要在webpack alias中新增相同配置的alias即可解決。

Webpack支援ts/tsx字尾

需要讓Webpack支援ts/tsx字尾，需要在extension欄位中新增相對應的值，具體如下：

{
    "extensions": [".ts", ".tsx"]
}
複製程式碼

注：需要增加的欄位都需要帶上`.`，否則Webpack仍然不識別。

無法解析tsx檔案

出現錯誤jsx You may need an appropriate loader to handle this file type.。

需要解決此問題，需要增加tsconfig.json中的jsx相對應的值，具體如下：

{
    "jsx": "react"
}
複製程式碼

無法找到@types/csstypes

在編譯時，出現無法找到@types/csstypes錯誤，具體錯誤內容為Cannot find module `csstype`.。

需要解決此問題，需要增加tsconfig.json中的jsx相對應的值，具體如下：

{
    "moduleResolution": "node"
}
複製程式碼

元素隱含地具有“任何”型別，因為型別“視窗”沒有索引簽名？

將部分JavaScript檔案改成TypeScript檔案時，會出現此錯誤，我遇到的問題是因為：定義的全域性物件沒有確定格式。

需要解決此問題，需要增加指定的Interface，格式如下：

Interface ObjInterface {
    [key: string]:string
}
複製程式碼

總結

本文是我在工作中配置TypeScript+Webpack+React開發相關腳手架時遇見的問題，大家只需要閱讀相關目錄，對相對應的問題有所瞭解。在遇到相對應的問題時，再搜尋進行解決即可。

相關文章