前言:利用该方式构建的 npm 包具有多项优势:
1、直接生成文档,根据 markdown 编写;
2、可以进行打包配置、修改输出形式;
3、可预览效果(类似 npm link);
首先理解一下 dumi
dumi,中文发音嘟米,是一款为组件开发场景而生的文档工具,与 father 一起为开发者提供一站式的组件开发体验,father 负责构建,而 dumi 负责组件开发及组件文档生成。
特性(地址)
- 📦 开箱即用,将注意力集中在组件开发和文档编写上
- 📋 丰富的 Markdown 扩展,不止于渲染组件 demo
- 🏷 基于 TypeScript 类型定义,自动生成组件 API
- 🎨 主题轻松自定义,还可创建自己的 Markdown 组件
- 📱 支持移动端组件库研发,内置移动端高清渲染方案
- 📡 一行命令将组件资产数据化,与下游生产力工具串联
缺点
目前只支持 react ,不支持 vue ,所以还是有点遗憾的;
快速上手
可以依据原文地址快速搭建自己的工程;
原文地址
注意事项
编译输出是在工程中 .fatherc 中进行配置的
最需要注意的就是 esm 这个配置项,决定了输出的方式;
esm: 'rollup', // bable 决定了是否合并文件
cssModules: false, // 是否单独编译 css
extractCSS: false, // 是否混淆 css 很重要,混淆后有的css 不生效