一个脚手架，和其它东西混在一起断断续续做了三个月，总算是能用了（至少我个人用起来很舒服）

特点

简单、灵活、高度定制

简单

有多简单？就像市面上大部分脚手架那样，它拥有简单的 GUI 来进行交互：

几秒钟时间就能快速构建一个项目框架，这是基本盘

灵活

有多灵活？vue-cli 够不够灵活？setup-cli 的灵活程度不比它差

现在都推荐使用 create-vue，但它的灵活性还不如 vue-cli

vue-cli

vue-cli 当初最吸引我的就是 vue add 这种向已有项目引入新能力的功能（可惜它经常会误伤已有代码）

setup-cli 同样也有，但它有着门槛更低的定制能力，所以可以避免上面说的误伤已有代码的问题：

inject 指令

定制

vue-cli 的社区特别活跃，给出的特性和模板特别多，如果你要使用 Vue 来进行开发，它是一个不错的选择

但是，这种给出最佳实践预设的方式有着局限性，它不可能满足每一个人的需求

如果每次你生成完项目后，还需要去琢磨其配置从而进一步的客制化，这会令人抓狂

在 setup-cli 中，一切东西都可以定制、然后组合

setup-cli 除了默认提供的特性（就我一个人写那肯定少点），还能自定义属于你的模板库

我们可以通过 setup-cli repo 指令来管理我们的模板库，它可以是本地的也能是远程的，例如我的机器上就有一个默认的库和一个本地的自定义库：

模板库

在构建时可以轻松的选择需要的模板：

模板

又或者是 inject（注入，插件）：

注入

vue-cli 也提供了 “preset” 参数来指定模板呀

是的，但那终究是通过配置组合别人的东西，终究还是有着上面提过的问题

如果说要构建自己的 vue-cli 插件，我可以很肯定的告诉你，这绝对比构建一个 setup-cli 的 inject 来的繁琐

注入流程

在我提供的模板中，有着一个帮助已有项目增加完善的 lint 流程的 inject-lint

inject-lint 的工作流程大致如下：

  • 首先读取所有 inject-lint/files 目录下的文件

  • 然后执行 inject-lint/hook 下面的钩子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const hook = ({ hookHelper }) => {
      const { inquirer } = hookHelper.helpers;
      return {
        beforeGenerate: async () => {
          await inquirer.prompt([
            // 交互询问是否需要 eslint 或定制它
          ]);
        },
        onMerging({ src, dest }) {
          // 当遇到同名文件时，如何处理
          if (src.filename === 'package.json') {
            // 如果为 package.json，合并两文件内容并返回
            return JSON.stringify(dpMerge(dest.getJson(), src.getJson()));
          }
          // 默认使用 inject-lint 中的问题
          return src.getContent();
        },
        afterOutput: async () => {
          // 处理 eslint 交互等其它逻辑
        },
      };
    };

可以看到，inject-lint 通过一系列的 hooks 完成了对流程每一步的把控

在这些钩子中你能获得非常非常多的信息，具体还请看文章最后项目地址中的文档

只能说没有你做不到的事，只看你有没有能力去实现它（e.g. 分析 AST 来进行一些骚操作）

最后

本文只是简单介绍下，更详细的内容可以查阅仓库中的文档

仓库地址：Github

如果觉得还行就点个 star 吧