手记

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

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,正努力成为一名出色的工程师

1人推荐
随时随地看视频
慕课网APP