写在前面
在开始一个新的项目时，首先要做的就是搭建开发环境。我几乎没有使用过create-react-app等脚手架工具，都是自己慢慢地写webpack配置，写相关脚本等。这样能最大限度的保持灵活性，可以随时方便地修改环境。当然，坏处也很明显，效率较低。
于是，我决定根据以往的项目，总结一个比较通用的项目模板，开发一个简单的脚手架工具，后续起新项目时直接使用。
项目模板
项目模板总结如下
.|____.babelrc # babel配置|____LICENSE # 项目协议|____dist # 打包产出目录|____README.md |____.gitignore|____package-lock.json|____package.json|____build | |____plugins # 自定义的webpack插件| | |____MyPlugin.js | |____server # 脚本| | |____buildServer.js # 打包脚本| | |____devServer.js # 本地开发server| |____webpackConfig # webpack配置| | |____webpack.dev.config.js # 开发时配置| | |____webpack.base.config.js # 基本配置| | |____webpack.build.config.js # 打包时配置| | |____devProxyConfig.js # 本地开发代理配置|____postcss.config.js # postcss 配置|____src # 项目代码| |____template # html模板| | |____template.html| |____lib # 公用库代码| | |____tools.js| |____index.js # 入口文件js| |____index.scss # 入口文件css
模板是以react为技术栈的，里面的配置都是写死的，常用的package都已经在package.json中声明，直接npm install即可。需要更改打包配置，直接修改build目录下的代码即可。
脚手架
开发脚手架时，首先定义好脚手架的用法，首先得先取一个名字，随便来一个：easy-cli-react
接下来，明确一下脚手架的用法，在命令行输入：
easy-cli-react myProject
执行上面的命令会创建一个名称为myProject的目录，然后把项目模板的代码自动下载到myProject目录里。
开发脚手架时，最常用的是commander这个库。commander是一个Node.js 命令行接口的完整解决方案。具体文档参考：
https://github.com/tj/commander.js/blob/HEAD/Readme_zh-CN.md
开发
代码逻辑如下：
1、首先使用commander，获取项目名称。
const commander = require('commander');const chalk = require('chalk');const fs = require('fs-extra');const path = require('path');const request = require('request');const progress = require('request-progress');const exec = require('child_process').exec; const program = new commander.Command();let projectName = undefined; // 初始化命令行program .name('easy-cli-react') .version('0.0.1') .description('Init a react project using easy-template-react') .arguments('<projectName>') .action(name => { projectName = name; }) .parse(process.argv); if (!projectName) { console.log(chalk.red('[Error]: need projectName')); process.exit();}
2、接着，从github上下载之前项目模板代码，并解压，再把目录名称改成之前设置的项目名称。
const downloadZipName = 'template.zip';progress(request(templateUrl)) .on('progress', function (state) { const progress = Math.floor((state.percent || 0) * 100)+ '%'; console.log(chalk.cyan(`[easy-cli-react]downloading project template (${progress})`)); }) .on('error', function (err) { console.log(chalk.red(`[error]${err}`)); }) .on('end', function () { console.log(chalk.cyan('[easy-cli-react]downloading project template (100%)')); // 省略... // 解压并且重命名文件夹 const cmdStr = [ `unzip -o ${downloadZipName} -d ./`, `rm ${downloadZipName}`, `mv easy-template-react-master ${projectName}` ].join(' && '); exec(cmdStr); // 省略... }) .pipe(fs.createWriteStream(downloadZipName));
3、对项目进行初始化。这里暂时只简单修改一下package.json内的项目名称。
// 修改package.json内的项目名const packageJson = fs.readJsonSync(`${projectName}/package.json`);packageJson.name = projectName;fs.writeFileSync( `${projectName}/package.json`, JSON.stringify(packageJson, null, 4));console.log(chalk.cyan('[easy-cli-react]done!!'));
创建bin命令
开发时，是使用node index.js ${projectName}进行调试的，想要实现命令行功能，还需要进行下面的工作。
1、在代码第一行增加下面这一行代码：
#!/usr/bin/env node
这个是为了告诉操作系统，用node执行脚本文件。具体可以参考这篇文章：
https://juejin.im/post/5cb93cd651882578b148c637
2、在脚手架的package.json中配置bin
"bin": { "easy-cli-react": "index.js"}
脚手架的完整代码在这里：
https://github.com/CoyPan/easy-cli-react
测试安装
上述工作完成后，在脚手架目录下执行npm link，就可以执行自己的命令了。
$ easy-cli-react myProject #[easy-cli-react]start to download project template...#[easy-cli-react]downloading project template (0%)#[easy-cli-react]downloading project template (100%)#[easy-cli-react]start to init project...#[easy-cli-react]done!!
写在后面
我已经把这个简单的cli发布到npm了，执行npm install -g easy-cli-react安装即可。虽然还是一个简陋的工具，但已经可以大大解决自己的需求了。想要起一个新的项目，直接执行一条命令，再修改一下模板代码即可。符合预期。
