將搭建的 React 圖標庫發布到 npm 倉庫需要經過一系列步驟，包括配置 package.json、構建代碼、注冊 npm 賬號、測試和發布。以下是詳細流程：
1. 準備工作
(1) 確保項目結構完整
圖標庫的典型結構（以 Rollup 構建為例）：
my-react-icons/
├── dist/ # 構建輸出目錄（由 Rollup 生成）
├── src/ # 源代碼
│ ├── icons/ # 圖標組件
│ └── index.js # 統一導出
├── rollup.config.js # Rollup 配置
├── package.json # 項目配置
└── README.md # 使用文檔
(2) 檢查 package.json 關鍵字段
{"name": "my-react-icons", // 包名（確保唯一性，先在 npm 搜索是否重名）"version": "1.0.0", // 版本號（遵循語義化版本規范）"description": "A custom React icon library","main": "dist/index.js", // CommonJS 入口文件"module": "dist/index.esm.js", // ES Module 入口文件（支持 Tree Shaking）"files": ["dist"], // 指定發布到 npm 的目錄"scripts": {"build": "rollup -c", // 構建命令"prepublishOnly": "npm run build" // 發布前自動構建},"peerDependencies": { // 聲明依賴的 React 版本"react": ">=16.8.0","react-dom": ">=16.8.0"},"keywords": ["react", "icons", "svg"],"author": "Your Name","license": "MIT"
}
2. 注冊 npm 賬號
(1) 注冊賬號
- 訪問 npm 官網 注冊賬號。
- 如果已有賬號，跳過此步驟。
(2) 本地登錄 npm
在項目根目錄運行：
npm login
按提示輸入：
- Username: 你的 npm 用戶名
- Password: 密碼
- Email: 注冊郵箱（需驗證）
登錄成功后會顯示：
Logged in as <your-username> on https://registry.npmjs.org/
3. 構建代碼
運行構建命令生成 dist 目錄：
npm run build
確保 dist 目錄下包含：
index.js（CommonJS 格式）index.esm.js（ES Module 格式）
4. 測試本地包
(1) 本地模擬發布
在項目根目錄運行：
npm pack
生成一個 .tgz 文件（如 my-react-icons-1.0.0.tgz），在其他項目中安裝測試：
cd ../another-project
npm install ../my-react-icons/my-react-icons-1.0.0.tgz
測試是否正常使用：
import { Home } from 'my-react-icons';
(2) 使用 npm link（可選）
在圖標庫目錄運行：
npm link
在測試項目目錄運行：
npm link my-react-icons
5. 正式發布到 npm
(1) 檢查 npm 源
確保使用的是官方源：
npm config get registry
# 應該是 https://registry.npmjs.org/
如果使用淘寶鏡像，需切換：
npm config set registry https://registry.npmjs.org/
(2) 發布包
在項目根目錄運行：
npm publish
成功后會顯示：
+ my-react-icons@1.0.0
6. 發布后驗證
- 訪問
https://www.npmjs.com/package/my-react-icons，查看包是否已上線。 - 在其他項目中安裝測試：
npm install my-react-icons
7. 更新版本
修改代碼后，按語義化版本規則更新版本號：
- 補丁版本（修復 bug）:
npm version patch→1.0.1 - 次要版本（新增功能）:
npm version minor→1.1.0 - 主要版本（重大變更）:
npm version major→2.0.0
重新發布：
npm publish
8. 常見問題解決
(1) 包名沖突
錯誤提示：You do not have permission to publish "my-react-icons"
解決：修改 package.json 中的 name 為唯一名稱（如 @yourusername/my-react-icons）。
(2) 未驗證郵箱
錯誤提示：npm ERR! 403 Forbidden - PUT https://registry.npmjs.org/my-react-icons - You must verify your email before publishing a package
解決：登錄 npm 官網驗證郵箱。
(3) 重復發布
錯誤提示：Cannot publish over existing version
解決：更新版本號后再發布。
9. 高級配置（可選）
(1) 添加 TypeScript 支持
- 創建
index.d.ts類型聲明文件：// src/types.d.ts import * as React from 'react'; export interface IconProps extends React.SVGProps<SVGSVGElement> {size?: number | string;color?: string; } export declare const Home: React.FC<IconProps>; - 在
package.json中添加："types": "dist/types.d.ts"
(2) 自動化構建與發布
使用 GitHub Actions 自動發布（示例配置 .github/workflows/publish.yml）：
name: Publish to npm
on:push:tags:- 'v*'
jobs:publish:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v4- uses: actions/setup-node@v4with:node-version: 20registry-url: https://registry.npmjs.org/- run: npm install- run: npm publishenv:NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} # 在 npm 獲取 token 并添加到 GitHub Secrets
總結
- 配置
package.json：確保name、version、main/module字段正確。 - 登錄 npm：
npm login。 - 構建代碼：
npm run build。 - 測試本地包：
npm pack或npm link。 - 發布：
npm publish。 - 更新維護：通過
npm version和npm publish迭代版本。
完成以上步驟后，你的 React 圖標庫就可以被全球開發者通過 npm install 使用了！
