使用React构建自己的代码库

[kaindy7633]

Table of Contents generated with DocToc

• 使用 React 构建自己的代码库
  • 建立本地开发项目
    • 准备
    • 使用 Styleguidist
    • 创建组件
    • 添加样式
  • 对代码库进行测试
  • 发布到 NPM
  • 自动部署与文档

使用 React 构建自己的代码库

使用React进行开发，我们时常会希望把公共的组件分离出来（与项目分离）,并实现该组件在其他项目中进行复用，类似于 Ant Design 这样的UI组件库

我们将使用到以下工具和三方库：

• React和Emotion 用于基础组件创建和样式定义
• Styleguidist 用于实时开发和生成文档
• Jest和React Testing 用于测试
• Rollup和Babel 用于发布到 NPM
• Travis CI 用于部署

建立本地开发项目

准备

首先我们应该先创建项目目录并初始化

mkdir react-components-library && cd react-components-library
npm init -y

组件库依赖了 React 和 Emotion，所以我们要安装它们并添加为 peerDependencies，peerDependencies 就是将该项目的依赖列为公共依赖，也就是这部分声明的库会被安装到 node_moudules 中

接着我们来安装这些核心的依赖

npm install --save-dev react react-dom @emotion/core @emotion/styled

我们需要手动来更新 package.json，它应该像下面的示例这样：

{
  "name": "react-componnets-library",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "peerDependencies": {
    "@emotion/core": "10.x",
    "@emotion/styled": "10.x",
    "react": "^16.x",
    "react-dom": "^16.x"
  },
  "devDependencies": {
    "@emotion/core": "^10.0.28",
    "@emotion/styled": "^10.0.27",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

使用 Styleguidist

添加 Styleguidist，它可以在我们开发时提供实时预览的功能

npm install --save-dev react-styleguidist webpack

同时，我们还需要安装 Babel 的一些核心包，来让 Styleguidist 工作，并为 Babel 和 Styleguidist 创建配置文件

运行下面的命令安装 Babel 所需要的软件包

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react

接下来在项目根目录下添加 .babelrc 配置文件，

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

最后我们创建 Styleguidist 的配置文件，它看上去像 Webpack 的一个配置实例，以便使我们的 Babel 配置正确加载组件

创建 styleguide.config.js

module.exports = {
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: "babel-loader"
        }
      ]
    }
  }
}

现在准备启动实时开发服务器！

将 ”start”: “styleguidist server” 脚本添加到 package.json 并运行 npm start。

输入http://localhost:6060，您应该会看到类似以下内容的信息：

创建组件

现在代码库是空的，我们创建了项目和开发环境，现在我们需要来创建一些组件

一般我们会将组件放在 src/components 目录中

src/
└── components/
    └── Button.js

让我们先来创建一个非常简单的 Button 组件，创建文件： src/components/Button.js，然后写入以下代码：

import React from 'react';

export default function Button({ text }) {
  return <button>{text}</button>
}

重启服务后，我们已经可以预览 Button 组件了。

接着我们可以添加一个 Button.md 文件用来描述该组件

一个非常简单的 `Button` 组件

使用：

```jsx
import Button from './Button';

<Button text="Click Me" />

OK! 我们现在创建了第一个组件，并拥有了一个带实时预览的开发环境和可导出的文档。

添加样式

现在我们的 Button 组件没有任何样式，我们使用 Emotion 的 CSS-in-JS 功能来编写样式代码

首先我们需要安装 babel-plugin-emotion 插件，并添加到 .babelrc 中

npm install --save-dev babel-plugin-emotion

// .babelrc
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": ["emotion"]
}

对代码库进行测试

发布到 NPM

自动部署与文档