![博客-封面.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20f4b0ab095444b480acd8c0f81b9f88~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1382\&h=948\&s=291212\&e=png\&b=b6cff4#pic_center=700x) 好多前端工作多年依然不会搭建脚手架，本文就介绍下如何从零开始搭建一个前端脚手架。先看下[github的dipper-cli仓库](https://github.com/zyf118725/dipper-cli)和[npm](https://www.npmjs.com/package/dipper-cli)上的成果： ![博客-git.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6c3cc25458c4e7c9d85531a5c3911df~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1470\&h=1448\&s=225571\&e=png\&b=ffffff=300x) ![博客-npm.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3232a2bbb68d4f17a37752877cc3d44a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1784\&h=1370\&s=198008\&e=png\&b=fefefe=300x) **欢迎大家到github上点赞，大家也可以加入这个开源项目，为简历上增彩。大家可以加我微信哈 `zyfts1`，一块进步。** 好了，下面开始开发您的第一个前端脚手架吧 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f46283c5f5524919a4e75401c52e30a5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=500\&h=313\&s=7162\&e=jpg\&b=fefefe) # 一、为什么需要脚手架？ 1. 减少重复性的工作，不再从零创建一个项目，或者复制粘贴另一个项目的代码。 2. 根据动态交互生成项目结构和配置文件，具备更高的灵活性和人性化定制的能力。 3. 有利于多人开发协作，避免了人工传递文件的繁琐。 4. 可以集成多套开发模板，根据项目需要选择合适的模板。 # 二、前置-第三方工具的使用实现一个脚手架，通常需要以下工具 1. commander: 命令行工具 2. download-git-repo: 来通过git下载项目模板的插件 3. inquirer: 用于命令行交互问询等 4. ora: 用于实现node命令环境的loading效果，并显示各种状态的图标,显示 loading 动画 5. chalk: chalk是一个颜色的插件。可以通过chalk.green(‘success’)来改变颜色。修改控制台输出内容样式 6. log-symbols: 用于在打印输出的内容中加入icon更友好（显示出 √ 或 × 等的图标） \*\*注意：\*\*插件的版本。 **为了演示先创建一个小项目** ## 1. 创建demo并运行-4步 ### 新建文件夹 zyfcli，并初始化npm init -y 装包-注意版本 pnpm i commander@9.5.0 chalk@4.0.0 inquirer@8.2.1 ora@4.0.0 figlet download-git-repo ora log-symbols 注意：版本过高会报错，已踩坑... ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f9a33d5b75be4318bad5da0b933632cd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=300\&h=300\&s=16594\&e=gif\&f=2\&b=fdf85f) ### 配置入口文件在根目录下新建bin/index.js【整个脚手架的入口文件】 #! /usr/bin/env node console.log('hello world') 验证结果：在命令行中输入node ./bin/index.js,如果能打印出hello即成功将入口文件配置到package.json 的bin字段 { "name": "zyfcli", "bin": "bin/index.js", } // 写法2，注意bin里key，需要和nage保持一致 { "name": "zyfcli", "bin": { "zyfcli": "bin/www" } } npm link将命令挂载到全局执行 npm link将命令挂载到全局，然后再输入 zyfcli 就可以到达刚才node ./bin/index.js 的效果了 ## 2.commander-命令行指令引入commander const program = require("commander"); program.name('zyfcli').usage(`[option]`).version(`1.0.0`) // 解析用户执行命令传入参数 program.parse(process.argv); 在命令行输入commander --help，即可看到简单的效果 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d1fc9ace88444997914c17656d0dd770~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1286\&h=392\&s=212885\&e=png\&b=1a1a1a) ## 3. chalk-命令行美化工具 #! /usr/bin/env node const program = require("commander"); const chalk = require('chalk') program.name('zyfcli').usage(`[option]`).version(`1.0.0`) // 解析用户执行命令传入参数 program.parse(process.argv); // 演示美化工具 console.log(`${chalk.green("hello")} zyf`); 输入 zyfcli，看hello显示颜色 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4da41740d87a40dabf4ce364752a3512~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=910\&h=106\&s=50083\&e=png\&b=1a1a1a) 其他用法 console.log(`${chalk .green --颜色 .bold --加粗 .underline --下划线 ("hello")} zyf`); ## 4. inquirer-命令行交互工具 const Inquirer = require('inquirer'); // 命令行交互 new Inquirer.prompt([ { name: 'zyfcli', type: "checkbox", message: "Check the features needed for your project", choices: [ { name: 'Babel', checked: 'true', }, { name: 'TypeScript', } ] } ]).then((data) => { console.log(data); }) ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ea3e360c4f9d448c89ee02e9f26dff57~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1750\&h=546\&s=307414\&e=png\&b=191919) ## 5. figlet-艺术字 1. 安装 npm i figlet 2. 使用 const figlet = require('figlet') console.log(figlet.textSync('Hello Word')); 3\. 效果 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb5675d61add4981bcc2d243ecf6a4a2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1612\&h=474\&s=152711\&e=png\&b=191919) ## 6. ora-loading工具注意版本 1. 使用 const ora = require('ora'); const spinner = ora('Loading unicorns').start(); setTimeout(() => { // spinner.color = 'yellow'; spinner.text = 'Loading rainbows'; spinner.succeed() // spinner.stop() }, 1000); 效果 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f88b011ce46420b956f3f099ec5b38f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1628\&h=582\&s=198918\&e=png\&b=191919) ## 7. 小demo的完整代码 ``` #! /usr/bin/env node // 演示工具的使用 const program = require("commander"); const chalk = require('chalk'); const Inquirer = require('inquirer'); const figlet = require('figlet') const ora = require('ora'); program.name('zyfcli').usage(`[option]`).version(`1.0.0`) // 演示美化工具 console.log(`${chalk.green.bold.underline("hello")} zyf`); // 命令行交互 // new Inquirer.prompt([ // { // name: 'zyfcli', // type: "checkbox", // message: "Check the features needed for your project", // choices: [ // { // name: 'Babel', // checked: 'true', // }, // { // name: 'TypeScript', // } // ] // } // ]).then((data) => { // console.log(data); // }) // 艺术字 console.log(figlet.textSync('Hello Word')); // loading const spinner = ora('Loading unicorns').start(); setTimeout(() => { // spinner.color = 'yellow'; spinner.text = 'Loading rainbows'; // spinner.succeed() // spinner.stop() }, 1000); // 解析用户执行命令传入参数 program.parse(process.argv); ``` # 三、正式版走起先看下目录结构 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cbf65ab1336c42d2a64a509f5156ef4f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=263\&h=299\&s=29701\&e=png\&b=191919) ## 1. 处理bin的index文件 #! /usr/bin/env node const program = require("commander"); const chalk = require("chalk"); const figlet = require("figlet"); program .name("zyfcli") .usage(`zyfcli [option]`) .version(`zyfcli ${require("../package.json").version}`); program .command("create ") // 增加创建指令 .description("create a new project") // 添加描述信息 .option("-f, --force", "overwrite target directory if it exists") // 强制覆盖 .action((projectName, cmd) => { // 处理用户输入create 指令附加的参数 require("../lib/create")(projectName, cmd); }); program .command("config [value]") .description("inspect and modify the config") .option("-g, --get ", "get value by key") .option("-s, --set ", "set option[key] is value") .option("-d, --delete ", "delete option by key") .action((value, keys) => { console.log(value, keys); }); program.on("--help", function () { console.log( "\r\n" + figlet.textSync("zyf-cli", { font: "3D-ASCII", horizontalLayout: "default", verticalLayout: "default", width: 80, whitespaceBreak: true, }) ); // 前后两个空行调整格式，更舒适 console.log(); console.log( `Run ${chalk.cyan( "zyfcli --help" )} for detailed usage of given command.` ); console.log(); }); program.parse(process.argv); create.js先不写东西看下效果 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/17ed31d94f5f4642962297fae2bfa81f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1238\&h=726\&s=136832\&e=png\&b=181818) ## 2.处理create.js 路径：根目录/lib/create.js const path = require("path"); const fs = require("fs-extra"); const Inquirer = require("inquirer"); const downloadGitRepo = require("download-git-repo"); const chalk = require("chalk"); const util = require("util"); const { loading } = require("./util"); module.exports = async function (projectName, options) { // 获取当前工作目录 const cwd = process.cwd(); const targetDirectory = path.join(cwd, projectName); // 处理文件夹 await handleFolder(projectName, options, targetDirectory); // 1.选择模版 const { template } = await new Inquirer.prompt([ { name: "template", type: "list", message: "Please choose a template to create project", choices: [ { name: 'react', value: 'zyf118725/reactTs' }, { name: 'vue', value: 'https://vue仓库' }, // 演示 { name: 'angular', value: 'https://angular仓库' }, ], }, ]); // 2.下载 await download(template, targetDirectory); // 3.模板使用提示 console.log(`\r\nSuccessfully created project ${chalk.cyan(projectName)}`); console.log(`\r\n cd ${chalk.cyan(projectName)}`); console.log(" npm install"); // console.log(" npm run serve\r\n"); }; // 处理文件夹创建重名问题 async function handleFolder(projectName, options, targetDirectory) { if (fs.existsSync(targetDirectory)) { if (options.force) { // 删除重名目录 await fs.remove(targetDirectory); } else { let { isOverwrite } = await new Inquirer.prompt([ { name: "isOverwrite", // 与返回值对应 type: "list", // list 类型 message: "Target directory exists, Please choose an action", choices: [ { name: "Overwrite", value: true }, { name: "Cancel", value: false }, ], }, ]); if (!isOverwrite) { console.log("Cancel"); return; } else { await loading( `Removing ${projectName}, please wait a minute`, fs.remove, targetDirectory ); } } } } // 下载git仓库 async function download(templateUrl, targetDirectory) { const downloadGitRepoPromise = util.promisify(downloadGitRepo); await loading( "downloading template, please wait", downloadGitRepoPromise, templateUrl, targetDirectory // 项目创建位置 ); } ## 3. 添加utils工具函数封装axios等函数。 const ora = require("ora"); /** * 睡觉函数 * @param {Number} n 睡眠时间 */ function sleep(n) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, n); }); } /** * loading加载效果 * @param {String} message 加载信息 * @param {Function} fn 加载函数 * @param {List} args fn 函数执行的参数 * @returns 异步调用返回值 */ async function loading(message, fn, ...args) { const spinner = ora(message); spinner.start(); // 开启加载 try { let executeRes = await fn(...args); spinner.succeed(); return executeRes; } catch (error) { spinner.fail("request fail, reTrying"); await sleep(1000); return loading(message, fn, ...args); } } module.exports = { loading }; ## 4. 查看效果创建一个democli项目 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7de266f6c4d04316a3b128225ceca20f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=370\&h=95\&s=22409\&e=png\&b=030303) ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e0e882eb7ed44176817f0f3bea31c680~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=402\&h=178\&s=47760\&e=png\&b=020202) # 四、发布到npm npm包的发布比较简单，就不在赘述了，没整过的小伙伴可以查下教程 1. npm login 2. npm publish ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/97571b62b124470a89a8eff3f8ab6bcb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=686\&h=265\&s=104160\&e=png\&b=171717) 额，名字太简单了改下名字，就叫北斗cli吧 `dipper-cli` 修改下package继续发包，注意package的name和bin中的名称。 **小技巧，大家可以先到npm.com中输入名字看下有没有相似的名字。** !\[在这里插入图片描述]\( =300x) 发布成功 !\[在这里插入图片描述]\( =400x) # 五、参考 1. 掘金-从0到1搭建React脚手架 2. 3. 掘金-工具详解： 4. commander中文文档(github): # 六、仓库地址 1. **dipper-cli**: 2. **react模版-还在丰富中:** 3. 未来其他的模版也一并放在这下班码字不易，如果有帮到你请给个打赏谢谢 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b0ce99fce43f43899e325c47bcbb29ac~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=240\&h=240\&s=36484\&e=gif\&f=8\&b=faf6f5) ![博客-收款码.jpeg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b2517582122d49b586ff64318848644f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1080\&h=1481\&s=85762\&e=jpg\&b=22aa3d)