【前端框架篇】使用dumi移动端主题框架对antd design mobile进行二次封装的组件库开发

由于公司项目需要，最近使用dumi移动端主题框架对antd design mobile进行二次封装的组件库开发，在框架的搭建过程中，组件库和组建文档的打包发布遇到了很多问题，经过近半个月的摸索，项目逐渐完善，现将遇到的问题整理记录下来~

一、ts语法编译时，引入的本地图片提示“Cannot find module”问题

 在执行 father-build 打包命令时报错如下：

使用了网上很多解决方案都没能解决问题，最后整理了一套完整的解决方案，步骤如下：

1.修改tsconfig.json文件，注意文件中几个红框的配置项

新建对应路径的文件： 

declare module '*.less' {
  const value: {
    [key: string]: string
  }
  export = value
}

declare module '*.css';
declare module '*.svg';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.bmp';
declare module '*.tiff';

3.修改package.json

 最后，再重新执行father-build命令，打包成功~

二、无法自动生成API

dumi官方说明中说到，可以进行组件API的自动生成，需要在组件源码中进行对应的注解。但在实际操作中，刚开始写了注解，API一直无法自动生成，页面还一直报错，后来研究发现有以下几个问题：

1.  .md 文件中对应的API标签的src路径错误。

由于组件都放在了'src/components'文件夹下，切对应文件命名及引用API的方式如下图：

官网中有一句说明

不传递 src 将自动探测当前组件，比如 src/Hello/index.md 将会识别 src/Hello/index.tsx

 但此时，我的文件中没有对应的'index.tsx'，导致找不到对应的源文件，页面报错，而后改为

## API

<API hideTitle src="./icon.tsx"></API>

 API即可正常显示。

2.  TypeError: Cannot read property 'map' of undefined

 我的项目中遇到的这个问题，原因一般有两种：①注解格式写错 ②不明原因的编译错误。

解决方案：仔细检查注解格式是否写错，若检查没有出错，则随意修改某个注解文字后重新编译即可（经常遇到只是修改了文字就编译报错了，我就修改文字或者标点符号后保存编译就正常了，再改回去后保存编译也正常）

三. 本地运行和文档预览时样式都能正常加载，但打包组件使用时，对应的样式名直接消失不见了

 解决方案：

1.修改`.fatherrc.ts`文件

2.修改对应的样式表文件名为`.module.less`结尾

 重新打包即可，但father官方文档中表示下一版本将不支持cssModules，因为不便于组件库用户覆写样式。

如果页面中没有使用到styles.xxx的方式使用样式，则样式文件不需要.module的后缀，即样式文件名称直接为'xxx.less'即可，否则可能出现本地预览项目时样式正常加载，但引用到项目中时，样式丢失的情况。

四. 发布的组件包中，包含src源文件夹，而没有lib文件夹

想设置发布文件的黑名单，通过.gitignore或.npmignore这两个文件来设置忽略的文件或文件夹。
如果你在项目中增加了 .npmignore，那么其会完全替代掉 .gitignore 的作用。
想设置发布文件的白名单，设置package.json中的files属性。
例如

files:["package.json","src"]

这里的优先级是files>.npmignore>.gitignore

可以参考此处文章：npm发包注意 - 简书

所以，我当前项目的打包配置是这样的

以上就是遇到的主要问题，后续若有其他将持续更新~