前言

本文档的主要目的：教你如何快速搭建一个 DUMI 工程。

环境准备

官网的要求是 node 版本只需要在 10.13 或以上，但是实测推荐 node 最好是 16 版本及以上。

脚手架创建工程

dumi 提供以下三种创建模式：

# 初始化一个站点模式的组件库开发脚手架
yarn create @umijs/dumi-lib --site (推荐)
# 初始化一个文档模式的组件库开发脚手架
yarn create @umijs/dumi-lib
# 普通模式
yarn create @umijs/dumi-app

各模式区别：

• 站点模式和文档模式：

  • 站点模式：

    

  • 文档模式：

    

• 普通模式和组件库开发脚手架的区别

  组件库开发相比普通模式在模板工程中多了一个 father-build 组件打包工具。

  • 前端工程师经常用的 webpack 只适合做业务层级的应用打包，而在组件库的打包常用的是 rollup。倒也不是说 webpack 不能对组件库进行打包构建，只是配置文件编写起来相当麻烦，还有一个问题是，据网上的文章，当组件库打包为 ESModule 模块语法规范时存在不少问题。
  • father-build 的优势在于双构建模式，以 webpack 作为构建框架，可同时使用 esbuild 和 babel 两套构建核心对代码进行构建，且配置简单。

参考博客：

1. father-build GitHub 仓库 (opens new window)
2. dumi 官方文档-快速上手 (opens new window)