• ✔︎ 基于 docz 的文档功能（不再维护，建议 迁移到 dumi 或 单独安装 docz 使用）
  • ✔︎ 基于 rollup 和 babel 的组件打包功能
  • ✔︎ 支持 TypeScript
  • ✔︎ 支持 cjs、esm 和 umd 三种格式的打包
  • ✔︎ esm 支持生成 mjs，直接为浏览器使用
  • ✔︎ 支持用 babel 或 rollup 打包 cjs 和 esm
  • ✔︎ 支持多 entry
  • ✔︎ 支持 lerna
  • ✔︎ 支持 css 和 less，支持开启 css modules
  • ✔︎ 支持 test

  • ✔︎ 支持用 prettier 和 eslint 做 pre-commit 检查

    新建文件夹，安装依赖

    :::info yarn add umi-library -D :::

    1. mkdir componentProject
    2. cd componentProject
    3. yarn init
    4. yarn add umi-library -D

    编译

    1. yarn/npx umi-lib build --esm  
    2. yarn/npx umi-lib build --cjs 
    3. yarn/npx umi-lib build --umd name
    4. yarn/npx umi-lib build --cjs babel
    5. yarn/npx umi-lib build --cjs target node
    6. yarn/npx umi-lib doc dev
    7. yarn/npx umi-lib doc build

    esm cjs umd mjs

  • esm 主要浏览器使用，es6模块化 通常在es文件夹下

  • cjs 主要node使用，commitjs 模块化 通常在lib文件夹下
  • umd 和依赖一起打包成一个文件，暴露一个参数

  • mjs 压缩后的esm文件

    文档功能

  • mdx

  • index.module.less（会被识别为css modules）
  • npx umi-lib doc dev/build
  • 使用文档 https://www.docz.site/docs/getting-started

    配置文件

  1. umirc.library.js（father使用fatherrc.js）
  • entry (指定入口文件)
  • file ( 指定输出文件名)
  • cjs
  • esm
  • extraBabelPlugins （babel配置）
  • cjs 和 esm 支持 rollup 和 babel 两种打包方式，rollup 是跟进 entry 把项目依赖打包在一起输出一个文件，babel 是把 src 目录转化成 lib（cjs） 或 es（esm）, mjs=>和umd类似

  • 更多配置请看 https://github.com/umijs/father

    1. export default {
    2. esm: 'babel', // 通过 babel 编译相关组件即可，而无需打包在一个文件中，实现在使用时可按需加载。
    3. cjs: 'babel',
    4. lessInBabelMode: true, // less 转 css
    5. // 打包的产物若需引入 antd ，则通过按需加载形式引入。
    6. extraBabelPlugins: [
    7.   [
    8.     'babel-plugin-import',
    9.     {
    10.       libraryName: 'antd',
    11.       libraryDirectory: 'es',
    12.       style: true,
    13.     },
    14.   ],
    15. ],
    16. };

    添加脚本命令

    1. "scripts": {
    2.   "build":"father build --watch"
    3. }

    配置外部依赖项

  • cjs 和 esm 格式打包方式选 rollup 时有个约定，dependencies 和 peerDependencies 里的内容会被 external esm.mjs 和 umd 格式，只有 peerDependencies 会被 external （注意在配置文件中添加全局别名）打包方式 babel 时无需考虑 external，因为是文件到文件的编译，不处理文件合并

    1. "peerDependencies": {
    2.   "react": "^18.1.0"
    3. }

发布

  • 配置.gitignore(node_modules,.docz,dist)
  • files 指定需要发布的文件
  • 配置不同环境的入口 （main，module, unpkg ）
  • 切换回npm源 npm set registry https://registry.npmjs.org/
  • npm login
  • npm publish

    切换npm源

    1. npm get registry  // 查看当前镜像源 https://registry.npmjs.org/  为npm 默认镜像源(境外)
    2. npm config set registry  // 修改镜像源 此处以淘宝镜像为例：npm config set registry https://registry.npm.taobao.org
    3. npm config delete registry // 删除镜像源