ID: 符合预期的CoyPan
CoyPan，BAT某厂符合预期的FE，正努力成为一名出色的工程师
写在前面
在开始一个新的项目时，首先要做的就是搭建开发环境。笔者几乎没有使用过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目录下的代码即可。
这个模板放到了github上，后面要用的时候，直接拉下来改就行。接下来，就是开发一个脚手架工具，在命令行输入命令就能自动下载模板代码。
脚手架
开发脚手架时，首先定义好脚手架的用法，首先得先取一个名字，随便来一个：easy-cli-react
接下来，明确一下脚手架的用法，在命令行输入：
easy-cli-react myProject
执行上面的命令会创建一个名称为myProject的目录，然后把项目模板的代码自动下载到myProject目录里。
开发脚手架时，最常用的是commander这个库。commander是一个Node.js 命令行接口的完整解决方案。具体文档参考：
开发
代码逻辑如下：
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) {
console.log(chalk.cyan(`[easy-cli-react]downloading project template (${Math.floor((state.percent * 100) || 0)}%)`));
})
.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命令
代码开发完成后，想要实现命令行功能，还需要进行下面的工作。
1、在代码第一行增加下面这一行代码：
#!/usr/bin/env node
这个是为了告诉操作系统，用node执行脚本文件。具体可以参考这篇文章：
2、在脚手架的package.json中配置bin
"bin": {
"easy-cli-react": "index.js"
}
脚手架的完整代码在这里：
测试、安装
上述工作完成后，在脚手架目录下执行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安装即可。虽然还是一个简陋的工具，但已经可以大大解决自己的需求了。想要起一个新的项目，直接执行一条命令，再修改一下模板代码即可。符合预期。
参考文章：
ID: 符合预期的CoyPan
CoyPan，BAT某厂符合预期的FE，正努力成为一名出色的工程师
随时随地看视频
