当前位置 主页 > 网站技术 > 代码类 >

    手把手15分钟搭一个企业级脚手架(3)

    栏目:代码类 时间:2019-09-16 13:20

    重要性 包名称 功能
    必要 minimist 解析用户命令,将 process.argv 解析成对象
    必要 fs-extra 对 fs 库的扩展,支持 promise
    必要 chalk 让你 console.log 出来的字带颜色,比如成功时的绿色字
    必要 import-from 类似 require,但支持指定目录,让你可以跨工程目录进行 require,比如全局包想引用工程路径下的内容
    必要 resolve-from 同上,只不过是 require.resolve
    必要 inquirer 询问用户并记录反馈结果,界面互动的神器
    必要 yeoman-environment 【核心】用于执行一个「模板插件包」,后文详细描述
    锦上添花 easy-table 类似 console.table,输出漂亮的表格
    锦上添花 ora 提供 loading 菊花
    锦上添花 semver 提供版本比较
    锦上添花 figlet console.log出一个漂亮的大logo
    锦上添花 cross-spawn 跨平台的child_process (跨 Windows/Mac)
    锦上添花 osenv 跨平台的系统信息
    锦上添花 open 跨平台打开 app,比如调试的时候开打 chrome

    5.2 命令解析与分发

    命令的解析与分发,是「全局命令包」的核心功能,其过程比较简单。大家也可以直接看仓库cli-tpl (全部功能压缩到大约300行代码)

    cli 版本更新判断:

    先获取本 package.json 中的 version 再通过 npm view cli-tpl version 命令查询当前 npm 库最新版本 两者比较得出结论,提醒用户更新

    解析用户命令

    通过 process.argv[2] 获取到用户执行的实际命令,比如 dcli install 可拿到 install (正式版推荐使用 minimist 解析参数)

    处理命令

    比如 install 命令,则通过 require 动态映射 install.js 文件来处理该逻辑 注:require 支持动态名称,如 require('./scripts/' + command) 这样,如果 command 是 install 则映射执行 script/install.js 文件

    接下来我们看下 4 个核心命令,主要是:

    命令 效果
    install 帮用户安装/升级一个「模板插件包」
    init 帮用户初始化一个工程,并拷贝模板
    build 调用工程中的「构建插件包」,帮用户webpack构建
    dev 帮用户启动 devServer 进行调试

    下面逐一阐述每个命令的实现过程以及效果:

    5.3 install命令:安装一个「模板插件包」

    install 意思就是把这个模板插件包下载到硬盘;此处我做了一个最小功能的 demo 包gen-tpl (后文详细分解) 来辅助讲解