react组件如何发布

发布 React 组件的步骤

准备组件代码
确保组件代码模块化，包含清晰的 props 定义和类型检查（如使用 PropTypes 或 TypeScript）。组件应独立于项目环境，避免依赖全局变量。

配置 package.json
在项目根目录的 package.json 中设置以下关键字段：

• name: 包名（确保在 npm 唯一）。
• version: 遵循语义化版本（如 1.0.0）。
• main: 指定入口文件（通常为 dist/index.js）。
• module: ES 模块入口（如 dist/index.esm.js）。
• files: 定义发布包含的文件（如 ["dist"]）。
• peerDependencies: 声明 React 等必要依赖。

构建组件
使用 Rollup 或 Webpack 打包组件。以 Rollup 为例，配置 rollup.config.js：

import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: [
    { file: 'dist/index.js', format: 'cjs' },
    { file: 'dist/index.esm.js', format: 'esm' }
  ],
  plugins: [
    resolve(),
    commonjs(),
    babel({ babelHelpers: 'bundled' })
  ],
  external: ['react', 'react-dom']
};

测试与验证
通过 npm link 在本地项目中测试组件功能。确保组件在不同环境下（如 SSR）正常运行。

发布到 npm

1. 注册 npm 账号并登录（npm login）。
2. 执行 npm publish --access=public（私有包需付费账户）。
3. 更新版本时使用 npm version patch|minor|major 并重新发布。

可选优化

添加文档与示例
提供 README.md 说明用法，可通过 Storybook 或 Codesandbox 展示示例。

支持 TypeScript
发布类型定义文件（.d.ts），或在 package.json 中指定 types 字段。

自动化流程
集成 CI/CD 工具（如 GitHub Actions），自动执行测试、版本更新和发布。