Question

开发常见项目的脚手架工具前，我们先做一些前期准备工作。

模板配置化

随着项目沉淀，我们会有很多项目模版，如果把这些项目模版写死在脚手架中，就无法进行灵活扩展。为此，我们通过脚手架 + Egg + MongoDB 实现一套可灵活配置和扩展的项目模板管理机制，灵活、快速的实现项目模版的增删改查、分类等功能，解决项目模版无法扩展的问题。

项目模版制作

我们分别用 vue-cli、 create-react-app、vue-element-admin 准备三个项目做项目模版，然后分别发布到 npm 上。

@oweqian/template-vue3

npm 地址
项目地址

@oweqian/template-react18

npm 地址
项目地址

@oweqian/template-vue-element-admin

npm 地址
项目地址

为什么使用 npm 管理项目模板？

优势：

• 省去自己搭建静态资源服务器的成本
• npm 包含了 package 的版本管理机制
• npm 提供了可以根据 package 名称查询下载地址的 api
• npm 对所有上传的 package 进行 cdn 加速

(p≧w≦q) 嘻嘻嘻，狠狠地夸就完了~~~~

Egg + MongoDB

我们将通过企业级框架 Egg.js 实现后端服务搭建，并通过 Restful API 实现接口开发。然后在本地搭建 MongoDB 数据库，并导入项目模板数据。

项目地址： cli-oweqian-server

定义路由：

router.resources("/v1/project", controller.v1.project);

定义 GET 方法：

const Controller = require("egg").Controller;

class ProjectController extends Controller {
  // 项目模版查询
  async index() {
    const { ctx } = this;
    const res = await ctx.model.Project.find({});
    ctx.body = res;
  }
  // 项目模版查询
  async show() {
    const { ctx } = this;
    const { id } = ctx.params;
    const res = await ctx.model.Project.find({ value: id });
    if (res.length > 0) {
      ctx.body = res[0];
    } else {
      ctx.body = res;
    }
  }
}
module.exports = ProjectController;

配置插件信息：

// plugin.js
/** @type Egg.EggPlugin */
exports.mongoose = {
  enable: true,
  package: "egg-mongoose",
};

更新配置信息：

// config.default.js
config.mongoose = {
  url: "mongodb://oweqian:123456@127.0.0.1:27017/cli-oweqian",
};

创建 model 信息：

module.exports = (app) => {
  const mongoose = app.mongoose;
  const Schema = mongoose.Schema;
  const ProjectSchema = new Schema({
    name: { type: String },
    value: { type: String },
    npmName: { type: String },
    version: { type: String },
  });
  return mongoose.model("Project", ProjectSchema);
};

默认情况下，会在 collections 后面加 s，如：project，实际查询的是 projects。

查询 model 信息：

const { ctx } = this;
    const res = await ctx.model.Project.find({});
    ctx.body = res;

渲染动态化

上一节我们通过 Egg + MongoDB 存储的方式实现了模板配置化，即通过数据库配置的方式实现模板的修改，而不需要改动脚手架代码。

目前我们的模板都是静态的，即创建时什么样，创建后还是什么样，其中的内容无法进行动态渲染。这是不符合更复杂的需求的，比如 vue 的项目模板就大量使用了 ejs 进行模板的动态渲染。

如何实现模板渲染动态化？

通过 ejs 改良项目模板，生成动态模板

• 设计 @cli-oweqian/init 的插件机制
• 实现一个 init 插件，在插件中实现 ejs 模板渲染逻辑

改造 @oweqian/template-vue3 模板并发布到 npm：

// plugins/index.js
export default async function (api) {
  const mode = await api.makeList({
    choices: [
      {
        name: "API",
        value: "api",
      },
      {
        name: "默认",
        value: "default",
      },
    ],
    message: "请选择代码模式",
  });
  console.log(mode);
  return {
    mode,
  };
}

// template/package.json
{
  "name": "<%= data.name %>",
  // ...
}