当前位置: 首页 > Web前端 > HTML5

如何用npm做一个前端脚手架

时间:2023-04-05 01:40:27 HTML5

背景需求:在日常开发中,随着项目越来越多,可以复用的代码也越来越多,所以急需一套基础模板来初始化项目,把代码在自己的gitlab或者github上,每次都要重新找地址clone,很麻烦。预期结果:XXX初始化。..一行命令解决步骤:1、申请一个npm账号,https://www.npmjs.com/2。写一个npm项目package.json:{"name":"windssr","version":"1.0.8","description":"react-ssr的工具服务","main":"index.js","bin":{"windssr":"index.js"},"author":"windseek","license":"ISC","dependencies":{"chalk":"^2.4.2","co":"^4.6.0","co-prompt":"^1.0.0","commander":"^2.20.0"},"scripts":{"test":"test"},"存储库":{"type":"git","url":"git+https://github.com/Windseek/react-ssr-cli.git"},"keywords":["react","react-ssr","wind-ssr","react-ssr-cli"],"bugs":{"url":"https://github.com/Windseek/react-ssr-cli/issues"},"主页":"https://github.com/Windseek/react-ssr-cli#readme"}init.js'usestrict'constexec=require('child_process').execconstco=require('co')constprompt=require('co-prompt')constconfig=require('./template.json')constchalk=require('chalk')module.exports=()=>{co(function*(){//处理用户输入lettplName=yieldprompt('Templatename(你可以输入react,vue,angular):')letprojectName=yieldprompt('Projectname:')letgitUrl,branch;控制台日志(config.tpl);if(!config.tpl[tplName]){console.log(chalk.red('\n×Templatedoesnotsupport!'))process.exit()}gitUrl=config.tpl[tplName].urlbranch=config.tpl[tplName].branch//git命令,远程拉取项目和自定义项目名称letcmdStr=`gitclone${gitUrl}${projectName}&&cd${projectName}&&gitcheckout${branch}`exec(cmdStr,(error,stdout,stderr)=>{if(error){console.log(error)process.exit()}console.log(chalk.green('\n√Generationcompleted!'))控制台。log(`\ncd${projectName}&&npminstall\n`)process.exit()})})}index.js#!/usr/bin/envnode--harmony'usestrict'process.env.NODE_PATH=__dirname+'/../node_modules/'constprogram=require('commander')program.version(require('./package').version)program.usage('')program.command('init').description('生成新项目').alias('i').action(()=>{require('./init.js')()})program.parse(process.argv)template.json:{"tpl":{"react":{"url":"https://github.com/Windseek/reactssr.git","branch":"master"}}}写完之后需要发布:1.npm登录,填写用户名,密码2.修改package.json中的version3和npmpublish4.进入https://www.npmjs.com/可以看到成功。没有相关解释:1.在package.json中定义bin的位置2.在index中定义bin命令指定Executedcode3.在init中执行shell,去git获取代码模板安装初始化:1.npm安装windssr-g2,windssrinit3。选择使用的模板,react,angular,vue觉得对你有用的就支持