├── .npmignore ├── .gitignore ├── templates.json ├── package.json ├── bin └── react-cli ├── README.md └── commands └── init.js /.npmignore: -------------------------------------------------------------------------------- 1 | /node_modules -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /templates.json: -------------------------------------------------------------------------------- 1 | { 2 | "init": { 3 | "place": "Hzy0913/react-template", 4 | "branch": "" 5 | }, 6 | "complete-project": { 7 | "place": "Hzy0913/react-template", 8 | "branch": "#complete" 9 | }, 10 | "simple-project": { 11 | "place": "Hzy0913/react-template", 12 | "branch": "#simple" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "build-react", 3 | "version": "1.0.1", 4 | "description": "react project cli", 5 | "bin": { 6 | "build-react": "bin/react-cli" 7 | }, 8 | "keywords": [ 9 | "creat-react", 10 | "react", 11 | "cli" 12 | ], 13 | "author": "Hzy0913", 14 | "license": "MIT", 15 | "homepage": "", 16 | "dependencies": { 17 | "chalk": "^1.1.3", 18 | "commander": "^2.9.0", 19 | "download-git-repo": "^1.0.0", 20 | "inquirer": "^3.0.6", 21 | "ora": "^1.2.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /bin/react-cli: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | process.env.NODE_PATH = __dirname + '/../node_modules/' 3 | const { resolve } = require('path') 4 | const res = command => resolve(__dirname, '../commands/', command) 5 | const program = require('commander') 6 | 7 | program.version(require('../package').version ) 8 | 9 | program.usage('') 10 | 11 | program.command('init') 12 | .option('-f, --foo', 'enable some foo') 13 | .description('Generate a new project') 14 | .alias('i') 15 | .action(() => { 16 | require(res('init')) 17 | }) 18 | 19 | if(!program.args.length){ 20 | program.help() 21 | } 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## build-react-cli 2 | ##### build-react-cli是帮助你快速创建生成react项目的脚手架工具，配置了多种可选择的不同类型项目模版。 3 | ![Demonstration](https://github.com/Hzy0913/hanlibrary/blob/master/Demonstration.gif "Demonstration") 4 | ### Installation 5 | 6 | ``` 7 | npm install -g build-react 8 | ``` 9 | ### Usage 10 | ``` 11 | build-react init my-react 12 | ``` 13 | **tip：** 初始化项目是第一项选择项目模版提供三种类型。 14 | 1. `init`为通用项目模版，配置了常用的react工具。 15 | 2. `complete-project`为完整的react项目，包括请求工具，服务转发，登录注册，复杂嵌套路由。 16 | 3. `simple-project`为简单项目模版，提供了react以及react-router基本配置。 17 | ##### 初始化项目完成以后 18 | ``` 19 | cd my-react //进入项目目录 20 | npm install //安装项目依赖 21 | npm start //运行项目 22 | ``` 23 | ### command 24 | ###### 启动项目 25 | `npm start` 或者 `npm run dev` 26 | ###### 启动项目后自动打开浏览器(传入 --o 参数) 27 | `npm start --o` 或者`npm start --open` 28 | ###### 打包项目 29 | `npm run build` 30 | ###### 打包项目并查看分析项目大小 31 | `npm run build --a` 32 | ### config 33 | `config`目录下的`index.js`文件为项目webpack配置文件，包括有运行端口、地址、本地服务代理配置等一系列配置。 34 | 35 | | 名称 | 类型 | 描述 | 36 | | ------------ | ------------ | ------------ | 37 | | host |String | 主机 | 38 | | port | Number | 端口 | 39 | | proxyTable | Object | 代理配置 | 40 | | useEslint | Boolean | 是否使用eslint | 41 | | autoOpenBrowser | Boolean | 是否自动打开浏览器 | 42 | | errorOverlay | Boolean | 是否使用全屏报错提示 | 43 | | notifyOnErrors | Boolean | 是否使用消息通知 | 44 | | showEslintErrorsInOverlay | Boolean | 是否使用eslint全屏报错提示 | 45 | | bundleAnalyzerReport | Boolean | 是否使用打包编译完成后显示依赖分析 | 46 | -------------------------------------------------------------------------------- /commands/init.js: -------------------------------------------------------------------------------- 1 | const {prompt} = require('inquirer') 2 | const program = require('commander') 3 | const chalk = require('chalk') 4 | const download = require('download-git-repo') 5 | const ora = require('ora') 6 | const fs = require('fs') 7 | const path = require('path') 8 | 9 | const option = program.parse(process.argv).args[0] 10 | const defaultName = typeof option === 'string' ? option : 'react-project' 11 | const tplList = require(`${__dirname}/../templates`) 12 | const tplLists = Object.keys(tplList) || []; 13 | const question = [ 14 | { 15 | type: 'input', 16 | name: 'name', 17 | message: 'Project name', 18 | default: defaultName, 19 | filter(val) { 20 | return val.trim() 21 | }, 22 | validate(val) { 23 | const validate = (val.trim().split(" ")).length === 1 24 | return validate || 'Project name is not allowed to have spaces '; 25 | }, 26 | transformer(val) { 27 | return val; 28 | } 29 | }, { 30 | type: 'list', 31 | name: 'template', 32 | message: 'Project template', 33 | choices: tplLists, 34 | default: tplLists[0], 35 | validate(val) { 36 | return true; 37 | }, 38 | transformer(val) { 39 | return val; 40 | } 41 | }, { 42 | type: 'input', 43 | name: 'description', 44 | message: 'Project description', 45 | default: 'React project', 46 | validate (val) { 47 | return true; 48 | }, 49 | transformer(val) { 50 | return val; 51 | } 52 | }, { 53 | type: 'input', 54 | name: 'author', 55 | message: 'Author', 56 | default: 'project author', 57 | validate (val) { 58 | return true; 59 | }, 60 | transformer(val) { 61 | return val; 62 | } 63 | } 64 | ] 65 | module.exports = prompt(question).then(({name, template, description, author}) => { 66 | const projectName = name; 67 | const templateName = template; 68 | const gitPlace = tplList[templateName]['place']; 69 | const gitBranch = tplList[templateName]['branch']; 70 | const spinner = ora('Downloading please wait...'); 71 | spinner.start(); 72 | download(`${gitPlace}${gitBranch}`, `./${projectName}`, (err) => { 73 | if (err) { 74 | console.log(chalk.red(err)) 75 | process.exit() 76 | } 77 | fs.readFile(`./${projectName}/package.json`, 'utf8', function (err, data) { 78 | if(err) { 79 | spinner.stop(); 80 | console.error(err); 81 | return; 82 | } 83 | const packageJson = JSON.parse(data); 84 | packageJson.name = name; 85 | packageJson.description = description; 86 | packageJson.author = author; 87 | var updatePackageJson = JSON.stringify(packageJson, null, 2); 88 | fs.writeFile(`./${projectName}/package.json`, updatePackageJson, 'utf8', function (err) { 89 | if(err) { 90 | spinner.stop(); 91 | console.error(err); 92 | return; 93 | } else { 94 | spinner.stop(); 95 | console.log(chalk.green('project init successfully!')) 96 | console.log(` 97 | ${chalk.bgWhite.black(' Run Application ')} 98 | ${chalk.yellow(`cd ${name}`)} 99 | ${chalk.yellow('npm install')} 100 | ${chalk.yellow('npm start')} 101 | `); 102 | } 103 | }); 104 | }); 105 | }) 106 | }) 107 | --------------------------------------------------------------------------------