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": {