自定义脚手架

脚手架

通过学习不难发现，例如 vue-cil 脚手架，我们只需要安装 vue-cil，之后每次 vue create xxx, 就可以生成我们想要的初始化项目。那么我们通过了八个文档。我们已经做出了属于我们自己的 vite-cil，那么如何可以不需要每次搭建一遍呢？-- 这就是今天主题自定义脚手架。

初始化一个项目

例如 mason-cil

chalk: 修改控制台输出内容样式
commander: 命令行工具
inquirer: 交互式命令
co-prompt: 解析命令行

pnpm i chalk co co-prompt commander inquirer

安装他们之后

新建一个 index.js 的 node 文件

const program = require('commander');

program.usage('<command>') // 使用方式介绍

program.version(require('../package').version) // 版本

// 创建出 create 指令
program
  .command("create <item>")
  .description("创建项目的指令")
  .action(() => {
    require('./init.js')()
  })

// 格式化返回数据
program.parse(process.argv)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这里可以根据日常的使用，来解决一些日常的问题，这里演示了一个 create 的使用，还可以用更多的质量执行 node 方法。

制作一些模板

template.js

module.exports = {
    "init": {
        // 这边可以设计出很多的 git 模板让后续下载
        "vite-pc": {
            "url": "https://github.com/MYQ1996/vite-cil.git",
            "branch": "master"
        }
    }
}

1
2
3
4
5
6
7
8
9

页面生成器

generatePage.js

const template = require('./template');
let choices = [];
for (const key in template.init) {
    choices.push(key);
}
module.exports = {
    promptName: [{
        type: 'input',
        message: '文件名称',
        name: 'templateName',
        filter: function (val) {
            return val.toLowerCase()
        }
    }],
    promptType: [{
        type: 'list',
        message: '挑选一种基础模板:',
        name: 'templateType',
        choices,
        filter: function (val) { // 使用filter将回答变为小写
            return val.toLowerCase();
        }
    }]
}

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

核心 init 生成 js

const exec = require('child_process').exec
const co = require('co')
const template = require('./template')
const chalk = require('chalk')
const inquirer = require('inquirer')
const generatePage = require('./generatePage.js')
var fs = require("fs");

module.exports = () => {
  co(function* () {
    inquirer.prompt(generatePage.promptName).then(name => {
      inquirer.prompt(generatePage.promptType).then(type => {
        const { templateName } = name;
        const { templateType } = type;
        const templateInfo = template.init[templateType];

        // 通过两次选择获取的模板的名称、模板的类型

        // console.log(templateName);
        // console.log(templateType);
        // console.log(templateInfo);

        // 将 cmd 的质量，进行并且，下载模板之后进入模块，并且切换至分支
        let cmdStr = `git clone ${templateInfo.url} ${templateName} && cd ${templateName} && git checkout ${templateInfo.branch}`

        // 进行二进制流的处理写入
        fs.exists(`${templateName}`, function (exists) {
          console.log(exists);

          // 如果发现文件已经存在就退出
          if (exists) {
            console.log("文件已存在")
            process.exit()
            return
          }

          // 不然就进行写入
          exec(cmdStr, (error, stdout, stderr) => {
            if (error) {
              console.log(error)
              process.exit()
            }
            console.log(chalk.green('\n √ Generation completed!'))
            console.log(`\n cd ${templateName} && npm install \n`)
            process.exit()
          })

        })

      })
    })
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

发布 npm

建议是自己做一个私服，但是平台使用可以发布 npm 地址，方便自己使用。

发布流程npm网址

执行 npm login 登陆 npm 账号
执行 npm publish 进行发布

自定义脚手架 #

脚手架 #

初始化一个项目 #

制作一些模板 #

页面生成器 #

核心 init 生成 js #

发布 npm #