自定义react项目脚手架

呀呀呀呀，快过年啦，开心！而且之前一直想做的2个事，一个从0到1自定义开发ui组件库（从0到1 开发一个自己的ui库）已经做好啦，还有一个做个自定义的脚手架，现在也做好啦。2个flag完成，开心开心。提前祝大家新年快乐呀！

1. 效果展示

好了，回归正题，说一说开发这个脚手架的过程。首先呈现一下使用效果，这个脚手架生成的项目，包含有登录、框架以及菜单、按钮、路由权限。

ps：刚创建的项目，它的登录、权限、登出等接口，都是我写在node里的自定义的一些接口，所以真实业务中，需要删除node，在service文件里去调用真实后端的接口，修改proxy代理。然后就可以直接在pages中开发业务啦。

1. 首先全局安装依赖：npm install  react-antd-layout-cli  -g

2. 创建项目：react-antd-layout-cli

3. 根据提示步骤执行命令，启动服务

   

2. 核心思想

这个脚手架的核心思想，我之前也写过一个【写一个自定义的脚手架的前奏】，脚手架本质其实就是复制文件。首先写一个项目的模板，然后脚手架本质就是读取这个模板的所有文件目录以及每个文件的内容，然后在执行命令的目录下，生成项目模板的文件夹，文件，并在文件中写入读取到的内容。

3. 开发步骤

3.1 开发模板项目

首先要开发模板项目，后续脚手架就是以这个项目为模板，然后一顿复制。我的这个脚手架项目模板是react-antd-admin，git地址：https://github.com/lishengqin/react-antd-admin

开发这个模板项目，就跟正常开发一个业务项目一样的，我的这个项目是react+ts+antd+vite。首先【npm create vite react-antd-admin --template react-ts】创建项目，然后安装各种依赖，键盘一顿敲敲敲，然后项目启动，浏览器访问长下面的样子就可以。

登录接口、登出接口、获取用户接口、获取权限接口这4个接口我是用node自己写的接口，充当后端提供的接口。以获取用户信息接口为例，贴一下代码，其他接口都类似。

import express from 'express';
import bodyParser from 'body-parser';
let app = express();
/* 中间件，便于获取请求中的request payload参数，可以直接req.body获取 */
app.use(bodyParser.json());
let loginInfo = { password: '', username: '' };
// 登录接口
app.post('/admin/admin/login', function (req, res) {
  loginInfo = { password: req.body.password, username: req.body.username };
  res.send({
    code: 0,
    data: { token: 'tokenxxxxxxxx' },
    msg: '请求成功',
  });
});
// 获取用户信息接口
app.post('/admin/admin/get_admin_info', function (req, res) {
  res.send({
    code: 0,
    data: {
      admin_info: {
        id: 1,
        avatar: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.3xZKPhJHn9NxDTaVJ5iIKgHaHa&w=170&h=169&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2',
        real_name: loginInfo.username,
        username: loginInfo.username,
      },
    },
    msg: '请求成功',
  });
});

　　　app.listen(8888, function () {

       console.log(` 接口已启动:\n`, `http://localhost:${8888}\n`, `http://${getIPAddress()}:${8888}\n`);

     });

node接口写好之后，需要启动一下服务，这也是为什么要执行【npm run service】，本质就是执行这个node的js文件。src/service 目录下接口调用跟正常业务调用一样。

以上，模板项目就写好了，然后发布到github上去。

3.2 开发脚手架项目

脚手架项目的目录结构如图所示：

 脚手架本质就是在这个核心js文件中，去读取我们发布在github的模板项目的目录，文件以及文件的内容。github常用的api接口（https://cloud.tencent.com/developer/article/1875456）

调用github常用接口时有个细节需要注意，接口header如果不传【Authorization】参数，接口限制每小时只能请求60次，次数太少，但可以在github里获取token，将token放在请求头里，次数变成每小时5000次。

获取到的token不要提交到github，不然token会立马失效！！！

获取模板的文件和内容后，就是一顿创建目录，文件写入内容【fs.mkdirSync(path.resolve(创建的项目路径, 文件夹路径))】【fs.writeFileSync(path.resolve(创建的项目路径, 文件路径), content)】

在node调用第三方接口，需要使用【request】，首先安装request，【npm install request】，然后我稍微封装了一下。

function _request(url) {
  return new Promise((resolve, reject) => {
    request(
      {
        url: url,
        method: 'GET',
        headers: {
          'user-agent': 'lishengqin-Octocat-reactLayoutCli', // 这个参数不可以少哦，不然会报错滴
        },
      },
      function (err, response, body) {
        if (!err && response.statusCode == 200) {
          return resolve(body);
        } else {
          return reject(err);
        }
      }
    );
  });
}

然后就是循环去获取文件夹中的文件，文件的内容，github获取文件内容，返回的是base64的格式，需要转为string。

function base64ToString(b64) {
  return new Buffer.from(b64, 'base64').toString();
}

               

这个脚手架js文件写完后，需要在package.json中暴露出命令脚本。

 

 最后，【npm publish】发布这个脚手架就可以啦！