dumi 简介

官方文档： d.umijs.org/guide

dumi 是一款为组件开发场景而生的静态站点框架，负责组件的开发及文档组件的生成，具有以下特性：
具有更好的编译性能、内置全文搜索、全新主题系统、约定式路由增强、资产元数据2.0、提供与全新的 NPM 包研发工具 [father 4](https://github.com/umijs/father) 集成的脚手架，为开发者提供一站式的研发体验。
dumi 目前支持react、文档内嵌在组建目录中、可以引入模块写在代码事例中、可以自动生成组件的API。

利用脚手架构建项目

# 先找个地方建个空目录， ${base-compont} 是根据自己的需求定义这个空目录名称，这里我定义自己要开发的项目为base-compont

$ mkdir base-compont && cd base-compont

# 通过官方工具创建项目 npx create-dumi，选择你需要的模板，但是官方给的会在文件引入时出现问题，所以我用 yarn 来生成文件
$ yarn create @umijs/dumi-lib


# 安装依赖(yarn)后启动项目
$ yarn start

目录结构

.umirc.ts 文件说明

这个文件是dumi 配置文件，在这可以配置网站的logo图（logo）、名称（title）、主题色（theme）、以及开启apiParser（自动API表格等配置），了解更多可以查阅https://d.umijs.org/config 。

.fatherrc.ts文件说明

该文件是father-build 的配置文件，被用来组件库打包；详细的配置参考https://github.com/umijs/father-next/blob/master/docs/config.md

本项目中的配置如下：

export default {
   // father 以构建产物类型划分构建配置，其中 `esm`、`cjs` 产物为 Bundless 构建模式
  esm: 'babel',
  cjs: 'babel',
  extractCSS: true,
  // 指定要打包的源码入口文件
  entry: 'src/index.ts', 
  // 指定要额外挂载的 babel 插件
  extraBabelPlugins: [
    ['import', { libraryName: 'antd', libraryDirectory: 'lib', style: true }],
  ]
};

.gitignore 文件说明

在工作中，有时候必须要把某些文件放到git工作目录中，但又不能提交他们，所以需要创建一个.gitignore文件，把需要忽略的文件名填进去，Git就会自动忽略这些文件，那么忽略文件的原则是什么呢：
1.  忽略操作系统自动生成的文件，比如缩略图等；
2.  忽略编译生成的中间文件、可执行文件等，也就是如果一个文件是通过另一个文件自动生成的，那自动生成的文件就没必要放进版本库，比如Java编译产生的`.class`文件；
3.  忽略你自己的带有敏感信息的配置文件，比如存放口令的配置文件。

本项目通过脚手架已经帮我们自动的生成了.gitignore这个文件，还需我们在 # production 下面 再补充两个目录文件/docs-dist 和 /lib。

.prettierignore 文件说明

该文件的作用与.gitignore的作用一致, 用于忽略特定文件, 并且[语法](https://git-scm.com/docs/gitignore#_pattern_format)也一样，如果项目中有.gitignore文件, 可以在其中配置而不需要.prettierignore文件, 如果两文件同时存在则涉及优先级问题。
.prettierignore文件与.gitignore文件 的优先级：
    1.即使两个文件同时存在, 里面的配置也不会同时生效(不会mix在一起)
    2.只要.prettierignore文件存在, 一切都以.prettierignore文件为准, 而不管其他

.prettierrc 文件说明

这个文件是该格式化插件的重要文件, 格式化的规则都可在该配置文件中定义；

# tsconfig.json 文件说明

详细可参阅https://www.tslang.cn/docs/handbook/tsconfig-json.html

typings.d.ts 文件说明

在使用TS的时候，最大的一个好处就是可以给JS各种类型约束，使得JS能够完成静态代码分析，推断代码中存在的类型错误或者进行类型提示； 
TS完成类型推断，需要事先知道变量的类型，如果我们都是用TS书写代码，并且给变量都指定了明确的类型，这时TS可以很好的完成类型推断工作；
但是有时，我们不免会引入外部的 JS库，这时TS就对引入的JS文件里变量的具体类型不明确了，为了告诉TS变量的类型，因此就有了.d.ts (d即declare)，ts的声明文件。

组件开发

通过上文对dumi目录结构的介绍现在就开始开发我们的组件吧；通过脚手架生成的项目中，已经为我们在src构建了一个名为Foo的单个组件，在Foo的index.tsx中编写组件源码，在index.less中去编写组件样式，index.md 为该组件对应的组件文档，具体的代码需要根据自己想要编写的业务去开发就好了，最后需要在src/index.tsx 这个组建库入口文件中引入；
特别说明的是，在每个组件的说明文档（例如： Foo/index.md）dumi 是通过api帮我们自动生成的，要怎么操作呢？？首先要在.umirc.ts 文件中配置一个apiParser: {},然后在md文件下编写<API id='XXX' ></API>就可以啦；id为对应组件的名称；
可以参考：https://d.umijs.org/guide/auto-api-table

编写一个自动生成组件的脚本命令

1、创建一个用来生成新组件的模板

代码见： https://github.com/shilele1998/base-component/tree/main/component-template

2、scripts 脚本命令

什么是脚本命令

Node 开发当然离不开 npm，脚本功能是 npm 最强大、最常用的功能之一；那么什么是npm脚本呢？在每个项目中都会看到一个 package.json 文件，其中会看到一个scripts对象，scripts对象的每个属性就对应一个脚本命令，

例如以下代码：

"scripts": {
    "start": "dumi dev",
    "build": "dumi build",
  }

当我们执行npm run start 或者yarn start 时，就相当于执行了 node build.js；

package.json中脚本命令的优点

项目相关的脚本都会集中在一个位置；可以利用 npm 提供的很多辅助功能；

编写自己的脚本命令

由于 npm 脚本的唯一要求就是可以在 Shell 执行，因此它不一定是 Node 脚本，任何可执行文件都可以写在里面。

        "comp": "node scripts/common-component.js"
      }

如上面的代码在scripts对象中创建了一个comp属性，然后执行yarn comp 就可以执行这个脚本名命令了，那么node scripts/common-component.js 做了什么呢？ 当然去执行scripts文件夹下名为common-component.js的文件；

创建脚本文件

在用dumi脚本生成的文件中，和src文件夹平级创建一个名为scripts 的文件夹，在该文件夹下创建common-component.js；
那么common-component.js 要写些什么呢？
代码见：https://github.com/shilele1998/base-component/tree/main/scripts

shell.js：

官方文档： https://www.npmjs.com/package/shelljs；
Shelljs是Node.js下的脚本语言解析器，具有丰富且强大的底层操作(Windows/Linux/OS X)权限。Shelljs本质就是基于node的一层命令封装插件，让前端开发者可以而是直接在熟悉的javascript代码中编写shell命令实现功能。

yargs

Yargs 是一个很好的命令行程序库，它可以让创建一个在控制台中运行的应用程序的过程变得轻而易举。

参考文档

# node-"fs-extra"模块代替fs使用： https://juejin.cn/post/6844903641594216455
# Node.js 中 fs.stat 详解： https://juejin.cn/post/6955011872298893319
# yargs框架使用（常用API）：https://blog.csdn.net/qq_17175013/article/details/117044706
# Node.js命令行程序开发完整教程： https://www.kancloud.cn/outsider/clitool
# Node.js 命令行程序开发教程： https://www.runoob.com/w3cnote/node-js-command-develop.html

项目打包发布

首先，在发布自己的包时需要先查看下，自己定义包名是否已经存在（https://www.npmjs.com/）  ，然后在控制太输入命令就可以啦

// 登陆
npm login

// 控制台会提示输入相关信息
Log in on https://registry.npmjs.org/
Username:  // 用户名
Password: // 密码
Email: (this IS public) // 邮箱
Enter one-time password: // 如果之前做过 双因素身份验证 (2FA)，需要生成一次性密钥，在填的邮箱地址中会收到一封邮件，将收到的code填写在控制台

Logged in as xxx on https://registry.npmjs.org/.

# standard-version 介绍

官方文档： http://www.npmdoc.org/standard-versionzhongwenwendangstandard-version-jszhongwenjiaochengjiexi.html
standard-version 是帮助项目自动生成ChangeLog、升版本、打tag的工具，在package.json 文件中添加脚本命令如下

  "scripts": {
    "release": "standard-version"
  },

  那么在命令行执行 yarn release 时它会：
  -   取得当前版本（比如package.json里面的version字段），升版本：`1.0.0 => 1.1.0` 或者 `1.0.0 => 2.0.0`等（如何升级可以由参数控制）

-   基于commits生成ChangeLog文件
-   提交一个commit，包含ChangeLog和版本变更的文件
-   打tag