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

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

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

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

制作脚手架工具

• 1.生成一个项目 : nishishui

• 2.初始化项目:

npm init -yes
1

生成package.json文件

• 3.安装需要的模块
  commander(实现文件远程下载)
  download-git-repo(下载git仓库代码的库)

  npm i  commander download-git-repo
  1

• 4.注册指令
  当我们要运行调试脚手架时, 通常执行 node ./bin/index.js命令, 但是我们可以使用注册对应的指令, 打开 package.json文件, 先注册下指令:

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


1
2
3
4
5

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  ')
    .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);


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

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

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

把脚手架工具上传到npm

可以去npm官网注册一个
或者可以参考一下我之前的文章 如何将自己的包发布到npm上(或者是自己/公司的私有源

然后输入
npm login 登录npm 账号

npm publish 发布脚手架到npm

这个时候就可以在npm 上搜索到你发布的包的名称

使用我们自己的脚手架工具

全局安装脚手架工具

 npm install -g nishishui@1.0.3 
1

生成项目

 nishishui-cli init react zmTest
1

ok 完成! ! ! !