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

概述

本文爲配置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開發相關腳手架時碰見的問題，你們只須要閱讀相關目錄，對相對應的問題有所瞭解。在遇到相對應的問題時，再搜索進行解決便可。