构建 React 组件库：TypeScript + Sass + Storybook + Rollup

TypeScript + Sass + Storybook + Rollup 开发 React 组件库

在这个数字化时代，组件库对于构建可维护、可重用的应用程序变得至关重要。React 是一个流行的 JavaScript 库，用于构建用户界面。为了优化 React 组件库的开发，TypeScript、Sass、Storybook 和 Rollup 等工具发挥着至关重要的作用。

本指南将引导您了解使用 TypeScript、Sass、Storybook 和 Rollup 开发 React 组件库的基本流程。

1. 创建新项目

首先，使用以下命令创建一个新的 React 项目：

npx create-react-app my-component-library

2. 安装依赖项

接下来，安装必要的依赖项：

npm install --save-dev typescript sass storybook rollup rollup-plugin-commonjs rollup-plugin-json rollup-plugin-node-resolve rollup-plugin-sass rollup-plugin-terser

3. 配置 TypeScript

在 tsconfig.json 文件中，将 target 设置为 es5，并确保 allowJs 设置为 true：

{
  "compilerOptions": {
    "target": "es5",
    "allowJs": true,
  }
}

4. 配置 Sass

在 package.json 文件中，添加以下脚本：

"scripts": {
  "build:sass": "sass --no-source-map --style compressed src/styles/main.scss dist/index.css"
}

5. 配置 Storybook

安装 Storybook 并配置 .storybook/main.js 文件：

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
};

6. 配置 Rollup

在 rollup.config.js 文件中，配置 Rollup 打包器：

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import sass from 'rollup-plugin-sass';
import terser from 'rollup-plugin-terser';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/index.js',
    format: 'esm',
  },
  plugins: [
    resolve(),
    commonjs(),
    json(),
    sass({ output: 'dist/index.css' }),
    terser(),
  ],
};

7. 编写组件

在 src 目录下创建组件文件，如 Button.tsx：

import React from 'react';

const Button = ({ label }) => {
  return <button>{label}</button>;
};

export default Button;

8. 构建和发布组件库

运行以下命令来构建和发布组件库：

npm run build:sass && npm run build:rollup && npm publish

结论

通过遵循本指南，您可以使用 TypeScript、Sass、Storybook 和 Rollup 开发一个高效、可维护的 React 组件库。这些工具的结合可以提高您的开发效率，并确保您的组件库具有可重用性、可扩展性和可定制性。