SAO 源码阅读
更好的观看体验，移步飞书
https://bytedance.feishu.cn/docs/doccnPsquOewJCVXAGENOO1XWBb#
SAO 是什么？
代码仓库地址 https://github.com/saojs/sao
SAO 是一个脚手架，不同于 vue/react 这类的cli 脚手架， 可以通过 sao 新建很多个模板，根据模板批量生产初始化代码。
参考这里 https://github.com/saojs/awesome-sao
sao [nm](https://github.com/saojs/sao-nm) dirname
sao react dirname
SAO 做了什么
- 模板可以是本地，github 或者 npm，可以自动补充前缀，推断是什么模板。
- 添加 saofile.js 读取配置， 交互式弹窗，同时也会记住你上次填写的内容，下次默认输入。
- 上下对比下
{
type:"input",
name: 'name',
message: 'What is the name of the new project',
default: this.outFolder
},
{
type:"input",
name: 'description',
message: 'How would you describe the new project',
default: `my ${superb()} project`
},
{
type:"input",
name: 'author',
message: 'What is your name',
default: this.gitUser.name,
store: true,
required: true
},
{
type:"input",
name: 'username',
message: 'What is your GitHub username',
default: ({ author }) => this.gitUser.username ,
store: true
}
参考代码 https://github.com/saojs/sao-nm/blob/master/saofile.js
actions 处理了对文件的增删改移动，会默认读取 template 文件。
在执行前 执行 prepare 函数
在执行后 执行 completed 函数
配置文件的 this 指的是 sao 的 instance
SAO 是怎么实现的？
目录
从 cli.ts 开始到 index.ts 之后文件来回跳转，整体是这么一个阅读流程。
utils 写了公用的方法，cmd 处理了 cli 命令。
每个文件只有几百行，他写的可读性很高，读起来还比较简单易懂。
开始
- cli.ts
const { runCLI, handleError } = require('.') // 进入index
_runCLI_()._catch_(handleError)
_export_ { runCLI } _from_ './cli-engine'// 进入cli-engine
- 处理命令行
- generator 就是模板仓库的意思 后面的参数是文件地址
- 可以给 generator 设置别名 set-alias 和 get-alias
- list 可以展示所以的目前的 generator 仓库，它给仓库做了存储，如果模板仓库什么也不传递，代码会走缓存的仓库
下面走主线
- cmd/main
cli
._command_('[generator] [outDir]', 'Run a generator')
._action_((generator, outDir) =>
import('./cmd/main')._then_((res) => res._main_(cli)(generator, outDir))
)
const options_:_ _Options_ = {
generator,
outDir: outDir || '.',
updateCheck: true,
answers: cli.options.yes ? true : cli.options.answers,
...cli.options,
}
_try_ {
const sao = new _SAO_(options)
const g = sao.parsedGenerator
...
}
new 一个 SAO 对象 ，把options 参数传入
SAO 对传入的 options 做了一些处理
- SAO
onstructor(opts_:_ _Options_) {
this.opts = {
...opts,
outDir: path._resolve_(opts.outDir || '.'),
logLevel: opts.logLevel || 3,
}
// 如果输入 --debug 这种控制，就会在控制行中显示 log, 比如 logger.debug(path) 这个使用
_if_ (opts.debug) {
this.opts.logLevel = 4
} _else_ _if_ (opts.quiet) {
this.opts.logLevel = 1
}
logger._setOptions_({
logLevel: this.opts.logLevel,
mock: this.opts.mock,
})
// 缓存配置读取
// {
// type: 'repo',
// prefix: 'github',
// user: 'saojs',
// repo: 'sao-nm',
// version: 'master',
// hash: 'fd96efa8',
// path: '/Users/yourname/.sao/V2/repos/fd96efa8'
// }
this.generatorList = generatorList
//读取配置文件并解析，出来的是对象
//{
// type: 'local',
// path: '/Users/yourname/Desktop/sao-nm',
// hash: '5e247f02',
// subGenerator: undefined
//}
this.parsedGenerator = _parseGenerator_(this.opts.generator)
// _Sub generator can only be used in an existing_
}
this.generatorList 读取的是缓存历史配置
store: [
{
type: 'repo',
prefix: 'github',
user: 'saojs',
repo: 'sao-nm',
version: 'master',
hash: 'fd96efa8',
path: '/Users/yourname/.sao/V2/repos/fd96efa8'
},
{
type: 'npm',
name: 'sao-ts',
version: 'latest',
slug: 'sao-ts',
hash: '096eb060',
path: '/Users/yourname/.sao/V2/packages/096eb060/node_modules/sao-ts'
}
this.parsedGenerator 是对于目前的模板仓库做了分析缓存
{
type: 'local',
path: '/Users/yourname/Desktop/sao-nm',
hash: '5e247f02',
subGenerator: undefined
}
读取配置
-- 这个 help 我还没读取明白因为我写 help 的时候就会执行另一个逻辑了
_if_ (cli.options.help) {
async _getGenerator_(
generator_:_ _ParsedGenerator_ = this.parsedGenerator,
hasParent?_:_ _boolean_
)_:_ _Promise_<{ generator_:_ _ParsedGenerator_; config_:_ _GeneratorConfig_ }> {
const loaded = _await_ _loadGeneratorConfig_(generator.path)
const config_:_ _GeneratorConfig_ =
loaded.path && loaded.data ? loaded.data : defautSaoFile
...
}}
使用了 JoyCon 这个也是他写的，下载量很高，小巧玲珑的功能很好用，虽然星星不多，用的很多
const joycon = new _JoyCon_({
files: ['saofile.js', 'saofile.json'],
})
会读取你写的文件
最后返回了
_return_ {
generator,
config,
}
逻辑走 else
_await_ sao._run_()
async _run_()_:_ _Promise_<_void_> {
const { generator, config } = _await_ this._getGenerator_()
_await_ this._runGenerator_(generator, config)
}
async _runGenerator_(
generator_:_ _ParsedGenerator_,
config_:_ _GeneratorConfig_
)_:_ _Promise_<_void_> {
_if_ (config.description) {
logger._status_('green', 'Generator', config.description)
}
// 执行 prepare 函数
_if_ (typeof config.prepare === 'function') {
_await_ config.prepare._call_(this, this)
}
_if_ (config.prompts) {
// 交互式问题
// 使用 enquirer 处理了prompts，在 this 上挂载了 answers
const { runPrompts } = _await_ import('./run-prompts')
_await_ _runPrompts_(config, this)
} _else_ {
this._answers = {}
}
this._data = config.data ? config.data._call_(this, this) : {}
// 文件处理，添加，过滤，移动，删除，修改
// 用他自己写的 majo,跳去 majo 看了看三年前开始写的，这个也很有意思
_if_ (config.actions) {
const { runActions } = _await_ import('./run-actions')
_await_ _runActions_(config, this)
}
//执行 completed 函数
_if_ (!this.opts.mock && config.completed) {
_await_ config.completed._call_(this, this)
}
}
async completed() {
// git init 建立仓库，捂脸，当初我自己写就spaw 的 git init 真是太蠢了，还可以封装用别人的，真是学习了