首页手记总结一个项目模板，开发一个简单的脚手架

总结一个项目模板，开发一个简单的脚手架

标签：

Node.js 前端工具

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 命令行接口的完整解决方案。具体文档参考：

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) {
        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执行脚本文件。具体可以参考这篇文章：

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!!