基于 vite + react + typescript + pnpm 的组件库起步模板。
pnpm install
pnpm devpnpm build构建后会得到:
dist/types:组件类型声明dist/umd/*.umd.js:每个组件单独的 UMD 文件dist/umd/manifest.json:组件名、UMD 文件名和全局访问路径映射
每个组件放在 src/components/<ComponentName> 下,并通过 index.ts 作为组件入口,构建脚本会自动扫描并输出:
src/components/Button/Button.tsx
src/components/Button/index.ts
-> dist/umd/button.umd.js
UMD 产物默认把 react 和 react-dom 作为外部依赖处理,所以在浏览器里直接使用时,需要先注入 React 对应的脚本,再加载你的组件文件。
当前所有组件都会挂到统一的全局对象 xxx 上。例如:
button.umd.js -> window.xxx.Button