如何搭建一个简单的脚手架

起因

大部分项目的技术栈,引用的组件库,工具库等,以及整体的项目框架都是一致的,每次新开一个项目,都要做 N 次的 CV,影响效率不说,也不优雅。如何让这个过程变得简洁而又优雅呢?毫无疑问,我们需要一个自定义的脚手架,而我们的脚手架需求也很简单,就是把我们写好的模板代码拉下来就行啦。

实现一个通用的项目模板

具体实现的项目模板因人而异,这里提供一个自己实现的 vue + typescript 的项目作为参考:
vue-typescript-template

实现脚手架

  1. 新建一个文件夹,执行 npm init
  2. 在 package.json 中新增语句
    1
    2
    3
    "bin": {
    "vt-cli": "index.js"
    }
  3. 安装相关依赖
    1
    npm install commander child_process --save
  4. 新建 index.js 放入以下代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    #! /usr/bin/env node

    const program = require('commander');
    const { exec } = require('child_process');

    program.version('1.2.0', '-v, --version').command('init <name>').action((name) => {
    console.log('clone template ...');
    exec('git clone https://github.com/minteliuwm/vue-ts-template.git ' + name, function (error, stdout, stderr) {
    if (error !== null) {
    console.log('exec error: ' + error);
    return;
    }
    console.log(stdout);
    console.log('clone success');
    });
    });

    program.parse(process.argv);
  5. 发布
    1
    npm publish
  6. 安装测试
    1
    2
    3
    4
    5
    npm i --global custom-vt-cli

    vt-cli -v

    vt-cli init project_test

一个简单的脚手架就这么实现了,具体代码参照 custom-vt-cli,走过路过别忘了来个star哟~

查看评论