前端脚手架搭建(part 1)
创始人
2024-05-30 02:33:23
0

本篇主要介绍如何搭建前端脚手架,一步一步地实现通过搭建的脚手架下载对应的项目模板。

通过脚手架的创建,可以快速搭建项目的基础配置和模板,在部门项目开发的规范中尤其总要。

  1. 初始化项目:

创建一个文件夹,命名随便(自己自定义),这里我就命名为mfex-project,

然后在终端执行命令,初始化生成package.json

npm init -y

在文件夹下创建一个bin文件夹,在bin文件夹下面在创建一个index.js文件,如图所示

在index.js第一行加上这句话#! /usr/bin/env node,就是用node来执行此文件

在package.json中添加命令配置,这里命令为mfex-cli,可以自定义,添加"type":"module",

避免node版本带来的插件引入方式问题

npm link,讲这个npm包挂着在全局执行环境中

执行看看效果

  1. 读取用户命令行信息

需要用到commander,用来解析读取用户命令行中输入内容,commander文档

安装commander

npm i commander

主要用到以下api:

command():定义命令名字
action():注册callback函数
parse():解析命令行参数args

在index.js中开始编写读取用户输入命令的逻辑

import { program } from 'commander';
program.command('create ').action((projectName) => {console.log(`项目名${projectName}`);})
program.parse(process.args)

输入命令npx mfex-project create mfexdemo

3、拉取项目模板

需要用到download-git-repo,文档

npm install download-git-repo
#! /usr/bin/env nodeimport { program } from 'commander';
import downLoad from 'download-git-repo'
import path from 'path'program.command('create ').action((projectName) => {console.log(`项目名${projectName}`);//项目git地址const demoGitUrl = 'https://gitee.com/Hehanjian/vue-vite-template';//当前目录const targetDir = path.join(process.cwd(), projectName)downLoad(`direct:${demoGitUrl}`, targetDir, { clone: true }, (err) => {if (err) {console.log('获取模版失败')} else {console.log('获取模版成功!')}})})
program.parse(process.args)

在命令行上输入npx mfex-project create mfexdemo

项目创建成功

现在项目模板是写死一个的,下面做成可以自主选择,需要用到inquirer,可以加强对命令行的交互,inquirer文档

npm install inquirer

提供2个模板创建选择,vue和react

#! /usr/bin/env nodeimport { program } from 'commander';
import downLoad from 'download-git-repo'
import path from 'path'
import inquirer from 'inquirer'
const questionList = [{"name": "features", // 选项名称"message": "请选择要创建的项目模板", // 选项提示语"type": "list", // 选项类型 另外还有 confirm check 等"choices": [{"name": "vue","value": "vue","description": "vue3+vite+ts","link": "https://gitee.com/Hehanjian/vue-vite-template"},{"name": "react","value": "react","description": "react+vite+ts","link": "https://gitee.com/Hehanjian/react-vite-template"}]},]program.command('create ').action((projectName) => {console.log(`项目名${projectName}`);//项目git地址// const demoGitUrl = 'https://gitee.com/Hehanjian/vue-vite-template';//当前目录const targetDir = path.join(process.cwd(), projectName)inquirer.prompt(questionList).then(res=>{//获取选择的是那个choiceconst project = questionList[0].choices.find(item=>item.value === res.features)downLoad(`direct:${project.link}`, targetDir, { clone: true }, (err) => {if (err) {console.log('获取模版失败')} else {console.log('获取模版成功!')}})})})
program.parse(process.args)

执行命令npx mfex-project create mfex-vue,回车

项目创建成功

4、美化字体颜色和图标

安装2个插件,ora:设置图标,chalk:设置字体颜色

npm install ora chalk
#! /usr/bin/env nodeimport { program } from 'commander';
import downLoad from 'download-git-repo'
import path from 'path'
import inquirer from 'inquirer'
import ora from 'ora';
import chalk from 'chalk';
const questionList = [{"name": "features", // 选项名称"message": "请选择要创建的项目模板", // 选项提示语"type": "list", // 选项类型 另外还有 confirm check 等"choices": [{"name": "vue","value": "vue","description": "vue3+vite+ts","link": "https://gitee.com/Hehanjian/vue-vite-template"},{"name": "react","value": "react","description": "react+vite+ts","link": "https://gitee.com/Hehanjian/react-vite-template"}]},]const spinner = ora('模版资源下载中 ...')
program.command('create ').action((projectName) => {console.log(`项目名${projectName}`);//项目git地址//当前目录const targetDir = path.join(process.cwd(), projectName)inquirer.prompt(questionList).then(res => {//获取选择的是那个choiceconst project = questionList[0].choices.find(item => item.value === res.features)downLoad(`direct:${project.link}`, targetDir, { clone: true }, (err) => {if (err) {spinner.fail()console.log(chalk.red('获取模版失败'))} else {spinner.succeed()console.log(chalk.green('获取模版成功!'))}spinner.stop()})})})
program.parse(process.args)

运行结果如下

相关内容

热门资讯

AWSECS:访问外部网络时出... 如果您在AWS ECS中部署了应用程序,并且该应用程序需要访问外部网络,但是无法正常访问,可能是因为...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如,在Dockerfile中添加以下代码:FR...
AWR报告解读 WORKLOAD REPOSITORY PDB report (PDB snapshots) AW...
AWS管理控制台菜单和权限 要在AWS管理控制台中创建菜单和权限,您可以使用AWS Identity and Access Ma...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件,主要用于保护内网安全。在日常使用过程中,卸载该软件是一种常...
​ToDesk 远程工具安装及... 目录 前言 ToDesk 优势 ToDesk 下载安装 ToDesk 功能展示 文件传输 设备链接 ...
Azure构建流程(Power... 这可能是由于配置错误导致的问题。请检查构建流程任务中的“发布构建制品”步骤,确保正确配置了“Arti...
群晖外网访问终极解决方法:IP... 写在前面的话 受够了群晖的quickconnet的小水管了,急需一个新的解决方法&#x...
AWSECS:哪种网络模式具有... 使用AWS ECS中的awsvpc网络模式来获得最佳性能。awsvpc网络模式允许ECS任务直接在V...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...