前端脚手架开发指南：把握开发脚手架基础技巧

前端脚手架通过主动化的方式可以进步开发效率并减少重复工作，而最强大的脚手架并不是现成的那些工具而是属于你本身团队量身定制的脚手架！本篇文章将带你相识脚手架开发的基本技巧，帮助你把握怎样构建适合本身需求的工具，并带着你一步步走向前端开发的全新高度。
  目录
初识脚手架
初始化项目
命令行工具
commander(命令行处置惩罚工具)
chalk(命令行输出美化工具)
inquirer(命令行交互工具)
ora(loading美化工具)
loading-cli(loading美化工具)
figlet(生成艺术字) 
fs-extra(操纵当地目录)
git-clone(下载项目模板工具)
初识脚手架

        脚手架说明：本质上就是一个工具，它可以让我们只用一个命令就生成一个已经配置好的项目而不必要我们再花时间去配置和安装相干依靠，让步伐员专注于写详细的代码逻辑从而提拔项目的开发效率，很比如我们常用的类似：create-vue 和 create-react-app 就是脚手架，当然很多大厂也都有本身的脚手架，这里我们可以大概的相识一下脚手架工具搭建必要怎样的一个过程：
   1）目的：快速生成项目从而制止复制重复内容工作，节流开发时间提拔开发效率
  2）预备：把握命令行开发(各种插件包操纵)、熟悉node.js应用、npm发包流程
  3）功能：快速生成自定义项目配置项，例如：vue-router、pinia功能等
  4）完善：根据项目复杂程度不绝优化、细化、碎片化功能选择，适配不同项目开发
          脚手架演示：接下来我们以vue官方脚手架create-vue为例来演示一下脚手架一个具备哪些功能，终端运行如下命令开始创建项目：

1. npm create vue@latest

复制代码

可以看到当我们运行该脚手架命令之后提示我们要实行安装的vue版本，以及先容了一下vue.js是啥，然后让我们输入项目名称以及相应模板要包罗的功能，如下所示：

然后我们就可以切换到下载目录npm i安装依靠，运行项目即可，如下所示：

当然我们开发一个完善的前端脚手架也非一朝一夕可以或许完成，必要很长的时间去反复试错和打磨才华够见效，这也不是我一两篇文章所能讲解完善的，必要时间不绝的积累才华完成，盼望读者可以耐心的阅读。
初始化项目

项目初始化：接下来我们开始我们的脚手架项目开发，首先我们先建立一个文件夹然后在文件夹下终端运行命令：npm init 后一起回车操纵，文件中会生成一个package.json文件夹，如下所示：

然后接下来我们在根目录下创建bin/index.js文件作为入口文件并添加如下代码，可以看到在文件的第一行有如下这段代码标识，该文件的作用就是告诉系统脚本实行代码的步伐为node，系统就会本身探求node地点路径并直接实行 ./bin/index 文件而不再必要用户再命令前加node了：

1. #!/usr/bin/env node

复制代码

配置当地包：然后我们在package包中配置一下bin实行目录，可以自定义实行别名，然后终端实行如下命令将该当地包链接到全局，制止每次都重新安装模块，假如不再必要链接某个模块，可以通过npm unlink来删除全局的符号链接：

配置ts类型：这里我们终端实行如下命令安装typescript以及对应的node类型提示：

1. npm install typescript -D
2. npm install @types/node -D

复制代码

这里我们可以在项目根目录创建.npmrc文件，内里可以配置npm安装工具时的镜像源：

1. registry=https://registry.npmmirror.com

复制代码

然后我们在package.json包中配置build打包的时候将ts编译成js代码：

然后接下来我们在项目根目录创建忽略文件.gitignore以及详细业务代码存放地址src目录，然后再创建对ts进行配置的tsconfig.json文件，如下所示：

然后我们在src目录下编写业务代码，终端实行打包命令之后就会把ts代码编译成js文件到bin目录下运行，如下所示：

当然我们也可以配置一些自定义路径，如下所示：

1. {
2.     "include": ["./src"], // 指定哪些文件和目录需要包含在TypeScript编译过程中
3.     "exclude": ["./node_modules"], // 指定哪些文件和目录应该被排除在TypeScript编译之外
4.     "compilerOptions": { // 控制编译过程的具体行为的选项
5.         "resolveJsonModule": true, // 允许导入JSON模块
6.         "esModuleInterop": true, // 启用ES模块的兼容性，确保能够正确导入其他模块
7.         "allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块导入默认值
8.         "outDir": "./bin", // 指定编译后输出文件的目录
9.         "module": "ESNext", // 指定生成代码的模块系统，例如ESNext表示使用最新的ECMAScript模块规范
10.         "target": "ES6", // 指定ECMAScript目标版本，例如ESNext表示使用最新的ECMAScript规范
11.         "moduleResolution": "Bundler", // 指定模块解析策略，例如Bundler表示使用类似于Webpack的打包工具的策略
12.         "paths": {
13.             "@": ["./src"], // 指定模块的别名，例如"@": ["./src"]表示在代码中可以使用@来引用./src目录下的文件
14.             "@utils": ["./src/utils"],
15.             "@components": ["./src/components"],
16.             "@config": ["./src/config"]
17.         },
18.     }
19. }

复制代码

假如想编译打包之后可以或许解析我们设置的路径@的话，必要安装如下包：

1. npm i -D tsc-alias

复制代码

然后我们在配置的打包命令处调用一下即可，如下所示：

命令行工具

初始化玩项目之后，接下来我们就必要借助一些第三方命令行处置惩罚工具来实现一下脚手架功能，依靠第三方开源项目的命令行工具大致上如下所示：
   1）收集用户输入信息：yargs；commander
  2）提供交互体验：inquirer
  3）个性化输出：chalk；colors；ora；signale；clui；figlet
  4）校验输入准确性：semver；validate-npm-package-name；leven
  接下来我们就常用的一些命令行工具插件进行讲解，如下所示：
commander(命令行处置惩罚工具)

可以访问 github 链接来查看该工具的详细利用，终端实行如下命令进行安装：

1. npm install commander

复制代码

该工具我们基本上用到的就是选项和命令这两个功能，详细可以参考官方文档的讲解，如下所示：

由于我们项目的一些配置信息必要用到package.json文件中配置的一些内容，以是我们必要在下面的配置中配置一下可以引入json文件：

然后我们在src下的index.ts文件中编写如下代码，通过Pack引入json文件，然后引入commander包下的program用于创建命令行的实例，以及一些相应的配置，如下所示：

1. #!/usr/bin/env node
2. import Pack from '../package.json'
3. import { program } from 'commander'
5. program // 创建命令行接口实例
6.     .name(Pack.name)
7.     .version(Pack.version, '-v, --vers', '输出当前版本号')
8.     .usage('<command>(必填项) [options](可选项)')
9.     .description(`${Pack.description} (作者：${Pack.author})`)
11. program // 添加命令
12.     .option('-d, --debug', 'output extra debugging')
13.     .option('-s, --small', 'small pizza size')
14.     .option('-p, --pizza-type <type>', 'flavour of pizza');
16. program.parse(process.argv); // 解析命令行参数
18. const options = program.opts(); // 返回一个包含所有选项的对象
19. console.log(options)

复制代码

然后我们终端实行npm run build将ts文件编译成js文件，然后终端运行yyue-cli --help命令，如下：

chalk(命令行输出美化工具)

可以访问 github 链接来查看该工具的详细利用，终端实行如下命令进行安装：

1. npm install chalk

复制代码

然后我们可以通过如下的指令来控制显示文字的颜色、样式（如加粗、下划线、配景色等）：

1. import chalk from 'chalk';
3. console.log(chalk.blue('Hello world!'));
4. console.log(chalk.red.bold('Hello world!'));
5. console.log(chalk.green('I am a green line \n\n'));
6. console.log(chalk.yellow('With a yellow substring') + ' that becomes green again!');
7. console.log(chalk.hex('#FF6347')('Tomato color'));
8. console.log(chalk.rgb(123, 45, 67).underline('RGB color'));

复制代码

inquirer(命令行交互工具)

可以访问 github 链接来查看该工具的详细利用，终端实行如下命令进行安装：

1. npm install @inquirer/prompts

复制代码

接下来我们借助这个交互工具来实现一下上面演示create-vue脚手架的命令行操纵，这个工具提供的交互命令基本上就是我们常用的一些输入、选择啥的，这里我用输入框、选择框、确认框以及密码框来演示了一下，详细的代码如下所示：

1. #!/usr/bin/env node
2. import { input, select, confirm, password } from '@inquirer/prompts';
4. const answers = {
5.     projectName: // 项目名称
6.         await input({ message: '请输入项目名称\n', required: true, default: 'demo-test', validate: (value) => value.trim().length > 0 }).then((answer) => {
7.             console.log();
8.             return answer;
9.         }),
10.     projectFramework: // 项目框架
11.         await select({ message: '请选择项目框架：（↑/↓ 切换，回车选择）\n', choices: ['vite', 'umi', 'sharepoint'], default: 'vite' }).then((answer) => {
12.             console.log();
13.             return answer;
14.         }),
15.     projectPermission: // 项目权限
16.         await confirm({ message: '是否包含功能A（需要输入密码）', default: false }).then(async (answer) => {
17.             if (answer) {
18.                 let attempts = 0; // 初始化尝试次数
19.                 const maxAttempts = 3; // 设置最大重试次数
20.                 let pwdCorrect = false;
21.                 // 循环进行密码输入，最多重试三次
22.                 while (attempts < maxAttempts) {
23.                     const pwd = await password({ message: '请输入密码', mask: '*' });
24.                     if (pwd === '123456') {
25.                         console.log('密码正确');
26.                         pwdCorrect = true;
27.                         break; // 密码正确，跳出循环
28.                     } else {
29.                         console.log(`密码错误，请重新输入, 剩余尝试次数：` + (maxAttempts - attempts - 1));
30.                         attempts++;
31.                     }
32.                 }
33.                 // 如果超过了最大尝试次数，返回 false
34.                 if (!pwdCorrect) {
35.                     console.log('密码输入错误三次，功能A无法启用');
36.                     return false;
37.                 }
38.                 console.log();
39.                 return true; // 密码正确，启用功能A
40.             }
41.             console.log();
42.             return false;
43.         })
44. };
46. console.log("最终结果是：", answers);

复制代码

当然在github上inquirer也是提供了一些其他选项样式的选择，这里必要安装额外的插件，页面也是提供了选项样式的内容，如下所示，根据自身需求选择相应想要的命令行内容，这里不再赘述：

ora(loading美化工具)

可以访问 github 链接来查看该工具的详细利用，终端实行如下命令进行安装：

1. npm install ora

复制代码

根据官方文档我们可以通过如下代码进行一个演示：

1. #!/usr/bin/env node
2. import ora from 'ora';
4. const spinner = ora('下载中...').start(); // 启动 spinner
6. setTimeout(() => {
7.         spinner.color = 'red';
8.         spinner.text = '网络较慢，请稍等...';
9. }, 1000);
11. setTimeout(() => {
12.         spinner.succeed('下载完成');
13.     // spinner.fail('下载失败');
14. }, 4000);

复制代码

loading-cli(loading美化工具)

可以访问 github 链接来查看该工具的详细利用，终端实行如下命令进行安装：

1. npm install --save loading-cli

复制代码

这里我们根据官网给出的案例，简朴的封装一下，如下所示：

1. import loading, { Options, Loading } from "loading-cli";
3. class Load {
4.     load: null | Loading;
5.     constructor() {
6.         this.load = null;
7.     }
8.     /**
9.      * @param options
10.      * 开始loading状态，第二次开始穿string类型
11.      */
12.     start(options: Options | any) {
13.         if (!this.load) {
14.             this.load = loading(options).start();
16.         } else {
17.             this.load && this.load.start((options as string));
18.         }
19.     }
20.     /**
21.      * 结束loading状态
22.      */
23.     stop() {
24.         this.load && this.load.stop();
25.     }
26.     warn(text: string) {
27.         this.load && this.load.warn(text);
28.     }
29.     info (text: string) {
30.         this.load && this.load.info(text);
31.     }
32. }
34. export default new Load();

复制代码

然后我们在调用的loading的时候可以自定义loading的图标内容，如下所示：

1. #!/usr/bin/env node
2. import { loading } from "./utils/index.js";
4. loading.start({
5.     "text":"loading text!!",
6.     "color":"yellow",
7.     "interval":100,
8.     "stream": process.stdout,
9.     "frames":["◰", "◳", "◲", "◱"]
10. })
11. setTimeout(() => {
12.     loading.warn("警告信息");
13.     setTimeout(() => {
14.         loading.stop();
15.     }, 1000);
16. }, 3000);

复制代码

figlet(生成艺术字) 

可以访问 github 链接来查看该工具的详细利用，终端实行如下命令进行安装：

1. npm install figlet

复制代码

然后我们根据官网提供的案例，进行利用即可，如下我封装了一个函数然后调用这个函数即可：

1. const figletFont = () => {
2.     figlet("Hello World!!", function (err, data) {
3.         if (err) {
4.           console.log("Something went wrong...");
5.           console.dir(err);
6.           return;
7.         }
8.         console.log(data);
9.     });
10. }

复制代码

当然我们也可以采用调用文本函数的方式，允许从文本创建ASCII Art，也是从官网复制的，如下

fs-extra(操纵当地目录)

可以访问 github 链接来查看该工具的详细利用，终端实行如下命令进行安装：

1. npm install fs-extra

复制代码

如下我们可以通过process.cwd()来打印当前的项目文件类路径：

然后这里我们借助 fs-extra 工具来实现对项目文件资源的一些操纵，以下是校验文件是否存在的演示，这里我们实行一下假如文件存在且用户选择yes的环境下，就对文件进行删除操纵：

1. import { confirm } from '@inquirer/prompts';
2. import fs from 'fs-extra'
3. import path from 'path'
5. // 判断当前文件夹下是否存在传递过来的文件
6. const isExistFile = async (fileName: string) => {
7.     const targetPath = path.join(process.cwd(), fileName); // 获取当前工作目录下的目标文件路径
8.     if (fs.pathExistsSync(targetPath)) {
9.         const result = await confirm({ message: '是否覆盖已经存在的文件夹内容？', default: false })
10.         if (result) {
11.             fs.removeSync(targetPath)
12.             console.log("覆盖成功")
13.         } else {
14.             // 返回新的名字去创建
15.             return
16.         }
17.     } else {
18.         console.log("targetPath", targetPath)
19.     }
20. }

复制代码

git-clone(下载项目模板工具)

可以访问 github 链接来查看该工具的详细利用，终端实行如下命令进行安装：

1. npm install git-clone

复制代码

这个工具很简朴，就一个函数调用即可，如下我们借上面工具封装的函数进行利用，假如当前文件不存在已经输入的文件夹就创建一个文件，创建的文件内容则拉取我们的模板即可，这里我恣意网上找一个模板的下载链接，详细代码如下：

1. import { confirm, select } from '@inquirer/prompts';
2. import fs from 'fs-extra'
3. import path from 'path'
4. import gitClone from 'git-clone'
6. // 判断当前文件夹下是否存在传递过来的文件
7. const isExistFile = async (fileName: string) => {
8.     const targetPath = path.join(process.cwd(), fileName); // 获取当前工作目录下的目标文件路径
9.     if (fs.pathExistsSync(targetPath)) {
10.         const result = await confirm({ message: '是否覆盖已经存在的文件夹内容？', default: false })
11.         if (result) {
12.             fs.removeSync(targetPath)
13.             console.log("覆盖成功")
14.         } else {
15.             // 返回新的名字去创建
16.             return
17.         }
18.     } else {
19.         const projectList = {
20.             vue: 'https://github.com/bailicangdu/vue2-happyfri.git',
21.             react: 'git@github.com:react模板.git'
22.         }
23.         const result: any = await select({ message: '请选择框架模板', choices: ['vue', 'react'] })
24.         await gitClone(projectList[result], fileName, { checkout: 'master' }, function(err) {
25.             if (err) {
26.                 console.log('下载模板失败', err)
27.             } else {
28.                 console.log("下载模板成功")
29.             }
30.         })
31.     }
32. }

复制代码

当然我们在下载模板的时候也可以利用上面讲解到的loading美化工具来进行下载过程的美化：

当然我们下载完项目之后也可以打印一下下载完成的一些提示信息，这里注意一下要删除原项目中的git信息，如下所示：

   末了总结： 在这篇文章中，我们探讨了前端脚手架的开发技巧并深入相识了怎样构建一个高效、机动的脚手架系统，把握这些技巧可以或许帮助开发者进步工作效率减少重复劳动，同时提供更好的开发体验，无论是主动化的构建流程、模板生成还是模块化的开发结构，都能显著提拔项目的可维护性和可扩展性。
  当然前端脚手架的天下远不止这些内容，在后续的文章中博主将继续深入探讨更多脚手架相干的知识，包括怎样更好地集成第三方工具、优化性能、以及提拔团队协作等方面，通过这些分享盼望读者能将进一步提拔在前端开发中的脚手架利用技巧，创造更高效、更智能的开发流程，后续文章敬请期待！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告