从零到一：如何系统化封装并发布 React 组件库到 npm

1. 项目初始化

1.1 创建项目

首先，创建一个新的项目目录并初始化 package.json 文件。

mkdir my-component-library
cd my-component-library
npm init -y

1.2 安装依赖

安装开发所需的依赖项，如构建工具、测试框架等。

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react css-loader style-loader sass-loader node-sass

2. 项目结构设计

设计合理的项目结构，便于维护和扩展。

my-component-library/
├── src/
│   ├── components/
│   │   ├── Button/
│   │   │   ├── Button.js
│   │   │   ├── Button.scss
│   │   ├── Input/
│   │   │   ├── Input.js
│   │   │   ├── Input.scss
├── dist/
├── .babelrc
├── webpack.config.js
├── package.json
├── README.md

3. 编写组件

在 src/components 目录下编写组件代码。例如，创建一个 Button 组件。

// src/components/Button/Button.js
import React from 'react';
import './Button.scss';

const Button = ({ children, onClick }) => {
  return (
    <button className="button" onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

// src/components/Button/Button.scss
.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

4. 配置 Babel

创建 .babelrc 文件，配置 Babel 以支持 React 和 ES6+ 语法。

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

5. 配置 Webpack

创建 webpack.config.js 文件，配置 Webpack 以打包组件库。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: 'MyComponentLibrary',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  externals: {
    react: 'react',
    'react-dom': 'react-dom',
  },
};

6. 打包组件库

运行 Webpack 打包组件库。

npx webpack --mode production

7. 配置 package.json

确保 package.json 中的 main 字段指向打包后的文件，并添加必要的元信息。

{
  "name": "my-component-library",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "build": "webpack --mode production"
  },
  "peerDependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "files": [
    "dist"
  ]
}

8. 发布到 npm

8.1 注册 npm 账号

如果还没有 npm 账号，先注册一个。

npm adduser

8.2 登录 npm

使用 npm 账号登录。

npm login

8.3 发布

发布组件库到 npm。

npm publish

9. 版本管理和更新

每次发布新版本时，更新 package.json 中的版本号，并重新发布。

npm version patch # 或 minor, major
npm publish

10. 文档和示例

编写详细的文档和示例，帮助用户快速上手。可以在项目中添加 README.md 文件，并提供一个示例项目。

11. 持续集成和测试

配置持续集成（CI）工具，如 GitHub Actions 或 Travis CI，确保每次提交都通过测试。

12. 社区和维护

积极响应用户反馈，定期更新和维护组件库，确保其兼容性和稳定性。

总结

通过以上步骤，你可以将组件封装为组件库并发布到 npm 上。这个过程不仅涉及代码编写，还包括项目配置、打包、发布和维护等多个环节。合理的项目结构和良好的文档是成功的关键。