当前位置: 首页 > 后端技术 > Node.js

手动搭建前端脚手架

时间:2023-04-03 14:28:01 Node.js

手动新建项目有点low,怎么装?当然是自己写一个脚手架。写脚手架的基本过程基本是一样的过程。当然,在一些复杂的定制项目中,可能会有更多的小步骤,所以根据需要进行额外的考虑。1.输入基本信息2.下载基本代码3.对基本代码进行一定的修改Modification4.额外需要的库//nodejsrelatedconstfs=require('fs');constpath=require('path');//输入基础配置constinquirer=require('inquirer');//通过git下载基础代码constdownload=require('download-git-repo');//修改基本代码的配置文件consthandlebars=require('handlebars');//运行子程序,很有用constora=require('ora');const{spawn}=require('child_process');//美化打印的信息,你可以使用constchalk=require('chalk');constsymbols=require('log-symbols');,输入基本信息使用图书馆查询器引导用户配置项目基本信息。比如输入法有多种,直接输入,选项,是否输入等等,建议查看官方文档或者自己搜索翻译示例:inquirer。prompt([{type:'input',name:'year',message:'请输入项目年份,如2019(插件请输入“plugins”)',default:now.getFullYear()},{type:'input',name:'name',message:'请输入项目名称,如0702projectname',default:`${String(now.getMonth()+1).padStart(2,'00')}${now.getDate()}-projectName`},{type:'list',name:'platform',message:'PC端工程还是wap端工程?',choices:['pc','wap'],default:0},{type:'input',name:'author',message:'请输入作者姓名',default:'author_name'},{type:'confirm',name:'autoInitialize',message:'你想自动安装依赖项吗?'},{type:'list',name:'packageManager',message:'使用哪个包管理工具?',选择:['npm','yarn'],默认:0}]).then((answers)=>{const{year,name}=answers;constprojectBasePath=year=='plugins'?`project/${year}/${name}`:`project/zt/${year}/${name}`;//如果项目已经存在则退出if(fs.existsSync(projectBasePath)){returnconsole.log(symbols.error,chalk.red('Theprojectalreadyexists'));}//根据配置的项目名创建目录//下载依赖})二、下载依赖使用ora下载依赖,ora是一个库运行子程序,详细使用方法请参考官方文档。这个官方文档好像不太友好。下面通过代码简单介绍一下ora的功能:constora=require('ora');constdownload=require('download-git-repo');//使用子程序下载基础代码//子程序的优点是执行代码比较灵活,不能在当前目录下执行命令//缺点不会显示子程序中执行的代码的打印信息//这里设置子程序的名称为spinner,并启动子程序download(//在子程序中执行下载,下载过程信息不会在当前命令行打印,因为是子程序'git.koolearn-inc.com:guonei/koo-guonei-static-basecode',projectBasePath,{clone:true},(err)=>{if(err){spinner.fail();//子程序运行失败//打印信息symbols.error和chalk.red都是美化的,不加也没关系console.log(symbols.error,chalk.red(`获取git@${gitRepo}.git时出错:\n${错误}`));}else{spinner.succeed();//子程序运行成功}})}3.根据配置信息,对基础代码做一些改动这部分我一般会修改package.json文件配合webpack打包工具做出不同的考虑每个项目的需求都不一样,我就不做具体介绍,只提供一些思路。1、使用fs读取文件并修改。2.使用库handlebars修改包文件。4.附加例如自动下载依赖,推荐使用ora子程序下载依赖。spawn请参考nodejs官方文档constora=require('ora');const{spawn}=require('child_process');//安装依赖functionyarnInstall(dir,pm){constspinner=ora('正在安装依赖项...').start();constsp=spawn(pm,['install'],{cwd:path.resolve(__dirname,'../'+dir),shell:/^win/.test(process.platform)//Windows环境要加这句话,否则会报错})sp.on('message',msg=>{console.log(msg.toString());})sp.stdout.on('data',(data)=>{console.log(data.toString());});sp.on('close',code=>{if(code!==0){微调器。失败();returnconsole.log(chalk.red(`安装失败,退出代码${code}`))}spinner.succeed();console.log(chalk.green(`下载依赖成功~请执行cd${dir}`))})}5.其他关于自动下载依赖:一开始我想改变当前指向的地址主程序通过代码,但后来确定这是不可能的。目前自动下载依赖的方式只有子程序6。归根结底,这只是一个简单的项目脚手架。复杂的脚手架其实是在这个基础上考虑了更多的情况(更多的情况),比如需要依赖的额外库,前端框架开发基于什么(vue/react/jquery)等等,取决于业务需求。当然,编写脚手架可以大大规范项目的创建。看到这里如果觉得还可以,别忘了点个赞哦~