如何构建React组件库？-DEV365 开发者社区

在本文中，我试图讨论创建React组件库的步骤。

为什么我们需要构建React组件库？

如果您在项目之间共享了几个组件或某些JS代码，这些组件是复制的，这些事情发生了超过2或3次，则需要将共享代码转换为库。

所以让我们创建一个React组件库。

首先，我们需要生成我们的组件。我们可以创建一个React项目并创建一个组件。我们的文件夹结构就是这样：

├── src
│   ├── components
|   │   ├── Button
|   |   │   ├── Button.tsx
|   |   │   ├── Button.scss
|   |   │   └── index.ts
|   │   ├── TextField
|   |   │   ├── TextField.tsx
|   |   │   ├── TextField.scss
|   |   │   └── index.ts
|   │   └── index.ts
├── package.json
├── tsconfig.json
└── rollup.config.js

src/components/index.ts

export { default as Button } from "./Button";
export { default as TextField } from "./TextField";

创建组件后，我们需要配置汇总。我们使用汇总来捆绑我们的库（也可以使用webpack）。

让我们配置汇总以捆绑我们的库：

rolup.config.js

import externalDeps from 'rollup-plugin-peer-deps-external';
import typescript from '@rollup/plugin-typescript';
import sourcemaps from 'rollup-plugin-sourcemaps';
import resolve from '@rollup/plugin-node-resolve';
import commonJS from 'rollup-plugin-commonjs';
import replace from '@rollup/plugin-replace';
import styles from 'rollup-plugin-styles';
import babel from 'rollup-plugin-babel';
import json from '@rollup/plugin-json';
import pkg from './package.json';

const globals = {
  react: 'React',
  'react-dom': 'ReactDOM',
  'react-query': 'ReactQuery',
};

const plugins = [
  externalDeps(), //prevents packages listed in peerDependencies from being bundled with our component library
  commonJS(), //convert common js modules to es6
  resolve(), // Locate and bundle third-party dependencies in node_modules
  typescript(), // transpiles our TypeScript code into JavaScript.
postcss() // transforms our Sass into CSS
];

export default {
  input: `./src/components/index.ts`,
  output: [
    {
      name: 'index',
      file: `lib/index.cj.js`,
      format: 'cjs',
      sourcemap: true,
    },
    {
      name: 'index' ,
      file: `lib/index.es.js`,
      format: 'esm',
      sourcemap: true,
    },
    {
      name: 'index',
      file: `lib/index.umd.js`,
      format: 'umd',
      sourcemap: true,
      globals,
    },
  ],
  plugins,
}));

ESM与普通JS vs UMD
这些类型是JS模块格式。
WebPack和Node等一些工具使用常见的JS格式，以及一些工具，例如Rollup和WebPack2使用ESM模块。 UMD（通用模块定义）是努力在任何地方工作的模块类型。另外，UMD是其他格式的后备。如果您想将这些文件中的任何一个在浏览器中作为独立脚本标签，而没有像构建步骤这样的构建步骤。 webpack，您将要使用UMD。

如何测试我们的包装？
在发布之前，我们有3个选项可以测试我们的软件包：

NPM链接
NPM Pack
故事书

npm链接：
NPM链接在系统的NODE_MODULE中添加我们的软件包，并在全球安装软件包。每次更改文件时

npm包：
此命令将打包我们的软件包，我们可以在项目中安装软件包。我们在包装中进行的每一个更改，我们都需要运行此命令并再次安装我们的库。

故事书：
我认为，在本地测试我们的包裹的最佳方法是故事书。
此外，要测试我们的软件包，我们也可以拥有良好的文档。

最后一步：
最后，我们应该发布我们的包裹。
使用npm publish，我们可以在NPM注册表中发布包裹，但是在此之前，我们应该在NPM中创建一个帐户。
另外，我们需要对packge.json文件进行一些更改。

package.json：

{
  "name": "@react-components-library/react-sample-components-library",
  "version": "0.0.20",
  "main": "lib/index.js", // common js 
  "module": "lib/index.es.js", //esm
  "browser": "lib/index.umd.js", //umd
  "files": [
    "/lib"
  ],
  "type": "module",
  "scripts": {
    "test": "jest",
    "start": "styleguidist server",
    "build": "rm -rf ./lib && rollup -c",
    "prepublishOnly": "rm -rf lib && npm run build",
    "postbuild": "npm pack && tar -xvzf *.tgz && rm -rf package *.tgz",
    "docs:build": "styleguidist build"
  },
  "peerDependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
...
}

这里有一些提示：

我们应该在同伴依赖性中做出反应和反应，以防止汇总将这些软件包添加到我们的捆绑包中。
当npm publish执行时，首先运行prepublishOnly脚本。因此，我们可以将构建步骤添加到此脚本中。
files指示哪些文件或文件夹应推到NPM注册表。