如何封装一个自己的瑞士军刀脚手架

这篇文档算是一个迟到的总结，因为定制的脚手架早早的就使用了，按时间来算到现在差不多都快3年了，而一直没有一个很好的文档或者博客说明，脚手架都做了什么，或者说有哪些配置，在21年的时候，抽了点时间把项目整理了下，使用了一些新的架构方式（学习了nest-cli），然后重新升级了service服务，把两个项目做了一次新的升级，还有项目模版也做了一些改造，主要是配合升级了webpack5，其中service主要是参考了create-react-app的实现，改了一些自己的命名或者使用习惯，将一些可调整的参数可以通过config来修改定制，整体现在来说算是一个比较完整的实现方案了，可以很好的用于个人或者企业统一的脚手架管理上，当然整个项目也是脱胎于在流利说期间所做的实现方案，算是一个梳理过后的大整合吧

前言

时间说明：项目的上线实现是个bug，主要也是因为那个时间并不想去整理文档或者说写一篇博客说明，一直拖到了21年底差不多上线了一个文档站，这篇博客的时间也就和文档上线时间保持一致，最重要的原因是21年没写啥文档😭，就当是一个补充了

文档地址： https://dev.douni.one/docs/welcome

项目地址：

项目模版： https://github.com/virgoone/project-template

Lark-CLI

与 Create React App 功能类似，提供快速创建项目功能，目前实现是使用了设计模式重新修改了整体架构，之后拓展其他命令也变得异常 eazy 了

现在的命令比较简单，暂时只提供创建项目命令，其他之后可能会提供上传等

安装

使用

lark create <project - name>

其中项目使用的模版主要分成三种类型：移动端、控制台、普通PC网页，具体的源代码可参考前言中的项目模板，当然也可以直接输入自定义类型项目的git地址来下载想使用的项目模版

官方项目中比较完善的是控制台项目，主要是用 arco-design 和 mobx 来实现，内容和 arco-pro 是一致的，页面有Dashboard、简单的表格搜索展示、个人主页、结果页面、卡片列表、数据分析等，项目可以直接使用，只需要接入API即可

脚手架具体的配置或者参数信息可以参考文档站，这里就不多做介绍了

Lark CLI Service

service 具体实现大致和 CRA 一样，只是在合并webpack配置的时候，使用的是 webpack-merge 来实现，项目可配置部分和社区的 custom cra 基本一致，不同的地方是在于css modules的匹配规则等，如果想看具体差异的话，可以直接在cra项目的基础上执行 eject 来查看

项目目前和 lark-cli 是捆绑的，通过 lark-cli 创建的除自定义类型之外的项目使用的是 service 来构建，当然也可以单独安装service用在自己的项目中，主要修改的配置就是 config(lark.config.js) 和 babel，如果不使用自定义的babel插件，完全可以直接创建一个 lark.config.js 来启动和构建项目，具体配置参考：https://dev.douni.one/docs/lark-cli-service

安装

使用

在一个 React 项目中，@lark-org/lark-cli-service 安装了一个名为 lark-cli-service 的命令。你可以在 npm scripts 中以 lark-cli-service、或者从终端中以 ./node_modules/.bin/lark-cli-service 访问这个命令。

这是你使用默认 preset 的项目的 package.json：

你可以通过 npm 或 pnpm 调用这些 script：

其他具体配置参考文档站

这里比较着重说明的是，service 提供了 css modules 的支持，但使用方式有点区别，主要通过 url query 方式来匹配规则，具体：