从react-start到co源码(二)
react作为当前十分流行的前端框架,相信很多前端er都有蠢蠢欲动的学习它的想法。工欲善其事,必先利其器。这篇文章就简单的给大家介绍一下如何我快速的搭建一个
接下来就开始介绍如何去开发一个简单的 目录结构首先来看一下脚手架的目录结构,基本结构如下: -bin |--reactGenerator -commander |--init.js -config.json -package.json
项目依赖从 "dependencies": { "chalk": "^1.1.3","co": "^4.6.0","co-prompt": "^1.0.0","commander": "^2.9.0","ora": "^0.4.1" }
定义命令命令的基本定义主要是在 #!/usr/bin/env node const program = require('commander') const package = require('../package') // 定义版本号 program.version(package.version) // 定义使用的方法 program.usage('<command>') // 定义脚手架的初始化工作 program .command('init') .alias('i') .description('generator a react project') .action(() => { require('../commander/init')() }) // 解析参数 program.parse(process.argv) // 如果没有输入命令 显示帮助的内容 if (!program.args.length) { program.help() } 在这个文件中我们只定义一个 react-to-start init 或者 react-to-start i 其中 "bin": { "react-to-start": "bin/reactGenerator" } 初始化项目初始化项目主要使用的是 const co = require('co') const chalk = require('chalk') const prompt = require('co-prompt') const ora = require('ora') const fs = require('fs') const exec = require('child_process').exec const config = require('../config.json') const init = () => { co(function* () { let templateName = yield prompt('what is your template name? ') let projectName = yield prompt('what is your project name? ') let branchesName = config.branchesName if (!branchesName.includes(templateName)) { process.stdout.write(chalk.red(`n ${templateName} does not exit,you can choose one of the template listed below`)) branchesName.forEach((name,index) => { process.stdout.write(chalk.green(` n ${index + 1}. ${name} n`)) }) process.exit(1) } // 如果说有对应的template 拼接git url进行下载 let git = '' fs.exists('./.git',function(exists) { if (exists) { git = `git clone ${config.templateUrl} ${projectName} && cd ${projectName} && git checkout ${templateName}` } else { git = `git init && git clone ${config.templateUrl} ${projectName} && cd ${projectName} && git checkout ${templateName}` } // 使用 ora 打印出 loading + log let spinner = ora(`is downloading the template for ${templateName}...`) // 开始 loading 动画 spinner.start() exec(git,(error,stdout,stderr) => { spinner.stop() if (error) { console.log(error) process.exit() } process.stdout.write(chalk.green('n $$$ Generation completed! To use step by step as following: ')) process.stdout.write(chalk.green(`n 1. cd ${projectName} `)) process.stdout.write(chalk.green(`n 2. npm install n`)) process.exit(0) }) }) }) } module.exports = init 这个初始化命令的定义十分简单,有点 脚手架配置脚手架所对应的模板目录就是在上篇文章中所讲的内容,不了解的同学请戳从react-start到co源(一)如下就是配置文件: { "templateUrl": "https://github.com/pavoooo/template.git","branchesName": ["react"] }
以上就是脚手架的基本架构,有点头晕,有的地方写的可能有点粗糙。有疑问的同学欢迎留言或者到我的github提 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |