TypeScript + React 组件库配置踩坑记录

在构建组件库的过程中，我遇到了各种各样的配置问题，这些问题让我抓狂不已。后来我终于意识到，create-react-app生成的项目并不适合构建组件库。因为打包库和打包应用的配置有很大的差别，并且生成的配置有很多。

组件库通常被其他应用程序引用，因此我们无需构建用户界面，只需要导出组件即可。与应用程序相比，组件库的代码更简单，我们只需要编写组件本身的代码，而不需要编写应用程序的逻辑代码。

由于组件库的代码更简单，因此我们可以使用更简单的配置。我们可以使用 rollup 或 webpack 来构建组件库，并使用更少的配置。

在这里，我将分享一些我在构建组件库时遇到的配置问题以及解决方法。希望这些方法能够帮助您解决类似的问题。

问题一：无法导出组件

当我使用 create-react-app 生成的项目构建组件库时，我遇到了一个问题：无法导出组件。这是因为 create-react-app 生成的项目默认只支持导出应用程序的逻辑代码，而不支持导出组件。

为了解决这个问题，我需要修改项目的配置。首先，我需要安装 rollup。rollup 是一个用于构建 JavaScript 库的工具。然后，我需要在项目的 package.json 文件中添加以下配置：

{
  "scripts": {
    "build": "rollup -c"
  }
}

最后，我需要创建一个 rollup 配置文件。在这个配置文件中，我需要指定要构建的组件以及输出目录。

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'cjs'
  },
  plugins: [
    resolve(),
    babel({
      exclude: 'node_modules/**'
    })
  ]
};

问题二：无法使用主题

当我在组件库中使用主题时，我遇到了一个问题：无法使用主题。这是因为 create-react-app 生成的项目默认不支持使用主题。

为了解决这个问题，我需要修改项目的配置。首先，我需要安装 styled-components。styled-components 是一个用于创建主题的库。然后，我需要在项目的 package.json 文件中添加以下配置：

{
  "dependencies": {
    "styled-components": "^5.3.0"
  }
}

最后，我需要在项目的 src 目录下创建一个 theme.js 文件。在这个文件中，我需要定义组件库的主题。

// theme.js
import { createGlobalStyle } from 'styled-components';

const theme = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d'
  },
  fonts: {
    body: 'Arial, sans-serif'
  }
};

const GlobalStyle = createGlobalStyle`
  body {
    font-family: ${theme.fonts.body};
  }
`;

export default theme;

问题三：无法使用自定义组件

当我在组件库中使用自定义组件时，我遇到了一个问题：无法使用自定义组件。这是因为 create-react-app 生成的项目默认不支持使用自定义组件。

为了解决这个问题，我需要修改项目的配置。首先，我需要安装 babel-plugin-import。babel-plugin-import 是一个用于将自定义组件转换为 JavaScript 代码的插件。然后，我需要在项目的 package.json 文件中添加以下配置：

{
  "dependencies": {
    "babel-plugin-import": "^1.13.12"
  }
}

最后，我需要在项目的 .babelrc 文件中添加以下配置：

{
  "plugins": [
    "babel-plugin-import"
  ]
}

结束语

以上是我在构建组件库时遇到的几个配置问题以及解决方法。如果您在构建组件库时遇到了类似的问题，可以参考一下这些方法。希望这些方法能够帮助您解决问题。