构建一个属于组件的组件库

先pass过组件的编写，直接进入组件库的构建。

1、组件库配置

1.1 修改package,json

设置组件库名称、版本号以及支持多格式输出

{"name": "menu-list-component","version": "1.0.0","description": "MenuList 组件库 - 提供工序、系列和菜单项的层级展示功能","main": "lib/index.js","module": "es/index.js","types": "lib/index.d.ts","files": ["lib","es","dist"],

构建版本：

  "scripts": {"start": "dongting-cli serve","serve": "dongting-cli serve","local": "npm run start --local=true","build": "npm run build:lib && npm run build:es && npm run build:dist","build:lib": "rimraf lib && tsc","build:es": "rimraf es && tsc -p tsconfig.esm.json","build:dist": "dongting-cli build","prepare": "npm run build","test": "echo \"Error: no test specified\" && exit 1"},

  "peerDependencies": {"react": ">=16.8.0","react-dom": ">=16.8.0"},

作者与仓库：

 "author": "Your Name","license": "MIT","repository": {"type": "git","url": "git+https://github.com/your-username/menu-list-component.git"},

关键词：

  "keywords": ["react","component","menu","menu-list","react-component"],

依赖：

  "dependencies": {"ahooks": "^3.3.10","antd": "^5.11.0","antd-style": "^3.5.0","lodash": "^4.17.21","react": ">=16.8.0","react-dom": ">=16.8.0"},

dev环境的依赖：

  "devDependencies": {"@biomejs/biome": "1.9.4","@dongting/build-webpack-react": "0.0.24","@metacode/lint": "^1.1.3","@types/lodash": "^4.14.191","@types/react": "^18.0.28","@types/react-dom": "^18.0.0","buffer": "^6.0.3","dongting-cli": "0.0.27","rimraf": "^3.0.2","stream-browserify": "^3.0.0","typescript": "^4.9.5","webpack": "^5.102.1","webpack-cli": "^5.1.4"}

1.2 创建tsconfig.esm.json

配置 ES 模块输出格式的 TypeScript 编译选项

{"extends": "./tsconfig.json","compilerOptions": {"module": "esnext","outDir": "./es"}
}

1.3 配置webpack.config.js

设置library名称和UMD输出格式

配置resolve,fallback(处理node模块兼容性)

声明外部依赖，避免打包react等库

const webpack = require('webpack')module.exports = {// config 是 webpack-chain 的对象，可以链式修改配置default: (config, options) => {//组件库核心配置（library 设置、UMD 输出格式、外部依赖声明）config.output.library('MenuList').libraryTarget('umd').globalObject('this').filename('menu-list.js').pathinfo(false)config.externals({react: 'var window.GPReact','react-dom': 'var window.GPReactDOM',moment: 'var window.moment',lodash: 'var window._',antd: 'var window.GPAntd','@ant-design/pro-form': 'var window.ProForm','@ant-design/pro-table': 'var window.ProTable','@metacode/runtime': 'var window.MetacodeRuntime'})},configureWebpack: (options) => {return {//建所需的依赖解析设置resolve: {fallback: {stream: require.resolve('stream-browserify'),buffer: require.resolve('buffer/')}}}}
}

1.4 创建.npmignore文件

忽略不必要的文件（如 node_modules、源码等）

d:\component\menuList\.npmignore
.git
.gitignore
.vscode
config
node_modules
*.log
dist/*.map
examples
demo

2、依赖安装

# 在 menuList 目录下执行
npm install --save-dev webpack webpack-cli stream-browserify buffer typescript ts-loader
# 使用 --legacy-peer-deps 解决依赖冲突
npm install --legacy-peer-deps

3、构建组件库

# 构建所有格式
npm run build
npm run build:es
npm run build:lib

4、创建可安装的tarball包

# 在 menuList 目录下执行
npm pack

5、如何使用

5.1 安装组件库

# 在目标项目（如 my-react-app）目录下执行
npm install ../menuList/menu-list-component-1.0.0.tgz --legacy-peer-deps

5.2 在项目中导入并使用

/ App.jsx 中导入
import MenuList from 'menu-list-component';// 使用组件
function App() {const menuItems = [// 菜单项数据];return (<div><MenuList menuItems={menuItems} onItemClick={(item) => console.log('点击了:', item)} /></div>);
}

6、修改了如何重新发布？

删除dist文件→npm run build→npm pack

在使用的文件当中：

删除→下载即可

# 卸载旧版本（可选）
npm uninstall menu-list-component# 安装新版本
npm install ../menuList/menu-list-component-1.0.1.tgz --legacy-peer-deps

原代码：https://github.com/xixloveixixi/myComponent