搜索dumi 即可，dumi 也不错
1.相关文档：
umi-library 文档地址
2. 文件目录结构
3. 初始化项目
(1). 创建目录
#mkdir umi-library-demo && cd umi-library-demo # 初始化 生成package.json $ yarn init -y # 安装依赖 $ yarn add umi-library --save-dev
(2). 添加配置文件 .umirc.library.js
export default { entry: 'src/index.tsx', //文件入口 esm: 'rollup', //打包方式 es modules 导出格式为 export default XX 适用于 浏览器 cjs: 'rollup',// 打包方式 common js 导出格式是 modules.export = XX 适用于 node umd: { name: 'UMD',//指定 rollup 的 name 配置。 minFile:false//是否为 umd 生成压缩后的版本。 }, cssModules: true}
(3). package.json 添加 script:
"scripts": { "build": "umi-lib build",//打包 "doc:dev": "umi-lib doc dev", //启动文档 "doc:build": "umi-lib doc build"},
(4). 运行命令跑起来:
$ yarn run doc:dev
浏览器访问 http://127.0.0.1:8001/，即可看到我们的组件开发环境。 如果8001端口被使用则自动端口加1
4. 开发组件
(1). 新建 src/index.tsx 文件,src/index.modules.css 文件
index.tsx
import React from 'react'; import styles from './index.module.css' const Test = (props) => { return ( <> <a >hhhhhhh</a> <button className={styles.large}>ggg</button> { props.children } </> );}export { Test }
index.module.css
.large{ width:100px; color:blue; font-size: 27px;}
(2). 配置 tsconfig.json 使用typescript 进行组件开发
{ "compilerOptions": { "jsx": "react", // "outDir": "./dist", "target": "es5", "moduleResolution": "node", "esModuleInterop": true, }, "include": [ "./src/**/*", "./typings.d.ts" ]}
(3) 配置./typings.d.ts 以css module 模式引入css ,less,png ....
declare module '*.css';declare module '*.less';declare module "*.png";declare module "*.svg";declare module "*.mp4";declare module "*.webm";declare module "*.gif";declare module "*.json";
(4) 新增mdx 文件 ./sec/index.mdx
---name: Testroute: /---import {Test} from './index.tsx';# Button<Test>hhhhhh</Test># 1# 11## q11# 1234
5. yarn run doc:dev 查看效果
6. 发布文件
注意点： 发布私有包
流程与 npm 官方版本完全一样。通过 npm publish 发布。
(1) npm adduser
(2) npm publish
