前端搭建自己的cli脚手架, 实现前端工程化

我们都知道create-react-app, vue-clli , 是知名的脚手架工具, 但是在我们日常开发过程中, 总是会出现公用的组件或者公共的方法, 如果每次都从项目中粘贴复制会很麻烦, 尤其是复杂一点的组件( 深有体会… 或者你们公司有很多业务线但是呢基本框架都是不变, 主色调, 布局, 排版等等, 这个时候就需要一个模版, 你只需要通过自己搭建的私有库就可以一键生成

生成脚手架代码模版, 并放到github

你可以基于vue-cli, 或者 create-react-app 封装自己的业务代码或者组件
然后上传到github , 可以使用脚手架工具命令从gitlab上下载模版

在这里插入图片描述

制作脚手架工具

1.生成一个项目 : nishishui
2.初始化项目:

npm init -yes

生成package.json文件

3.安装需要的模块
commander(实现文件远程下载)
download-git-repo(下载git仓库代码的库)
```
npm i  commander download-git-repo
```
4.注册指令
当我们要运行调试脚手架时, 通常执行 node ./bin/index.js命令, 但是我们可以使用注册对应的指令, 打开 package.json文件, 先注册下指令:

 "bin": {
    "nishishui-cli": "index.js"
  },

bin下的nishishui-cli就是我们注册的指令, 你可以设置自己想要的名字

5 在项目根目录创建index.js文件
index.js

#! /usr/bin/env node
const program = require('commander');
const download = require('download-git-repo');
//version 版本号
//name 新项目名称
program.version('1.0.3', '-v, --version')
    .command('init <templateName> <projectName>')
    .action((templateName, projectName) => {
 	if(templateName === "react") {
            console.log('clone template ...');
          // 这个下载url格式时固定的 github:${git用户名}/${仓库名称}
            download('github:zhangmin9404/react-hooks', projectName, function (err) {
                console.log(err ? 'Error' : 'Success')
            })
        } else {
          console.error('A template name that does not exist')
        }
    });
program.parse(process.argv);

其中#!/usr/bin/env node（固定第一行）必加，主要是让系统看到这一行的时候，会沿着对应路径查找 node 并执行。

command解析输入nishishui-cli init react zmTest，init后面两个参数，一个模板名，一个项目名

测试阶段, 为了保证nishishui-cli指令可用, 我们可以再项目下执行npm link (不用的时候可以使用npm unlink 断开)