构建自己的脚手架

前端_chou
139 阅读2分钟

www.npmjs.com/package/cho…

初始化项目

  1. 新建文件夹
  2. npm init -y （生成package.json）
  3. 新建文件夹bin，在bin目录下新建入口文件（cli.js）
  4. package.json 配置 bin
  5. npm link (不发布和安装包的请款下，直接在项目中使用正在开发的npm包，用于调试)
// package.json 配置 bin
 "bin": {
  "chou": "bin/cli.js"
 }

第三方库：

commander — 命令行配置指令

GitHub地址： github.com/tj/commande…

想知道这个npm包的一些配置比如 node —vision node —help，这些就是用commander这个第三方库实现的

基本用法

// 这样设置以后 --help 就会有东西
const { program } = require('commander');
program.option('-f --framwork <framwork>','设置框架')
program.parse(process.argv)

chalk — 命令行美化工具

就是为了让你的脚手架交互起来花里胡哨的第一个插件

基本用法

const chalk = require("chalk");
console.log(`hello ${chalk.blue("world")}`);

inquirer — 命令行交互工具

这边注意，因为最新的9.x.x的版本是默认支持ESModule的，如果想使用CommonJS模块化，建议使用 cnpm install inquirer@7.3.3

这个组件是在控制台上与用户交流的必备第三方库

commander这个第三方库，实现用户能知道我们npm包的一些信息例如：版本，使用指令...

但是我们怎么完成跟用户的交互呢？用到的就是inqurer这个第三方库，实现交互式用户选择

ora — 命令行 loading 效果工具

这边注意，因为最新的6.x.x的版本是默认支持ESModule的，如果想使用CommonJS模块化，建议使用 cnpm install ora@5

figlet — 终端中生成 ASCII 艺术字

就一个装*的小工具

第一个脚手架的思路：

  1. 用ejs实现模板，让用户自己去生成模板，在固定的路径 （根路径/chouTemplate/模板）
  2. 首先要先判断是否有这个文件：根路径/chouTemplate 且 下面是否至少有一个以.ejs的文件
  3. 没有的话，询问是否需要帮忙创建，Y → 帮他生成模板（后续可以将模板放在GitLab，当前先放在该脚手架下）N → 给予提示
  4. 如果已经创建好了，且在 根路径/chouTemplate 不止有一个 .ejs的文件 ， 用交互式让用选择一个或多个文件，视为模板，而后以交互式的形式让用户选择模板创建的地址

发布npm

npm login

npm publish

删除本地测试 npm link → npm remove -g

avatar
文章
阅读
粉丝