如何用类似vue init webpack XXX的命令拉取脚手架创建项目

1. 事出有因

因为之前搭建了一套移动端的脚手架并用于众多个项目且落地，所以再后来的项目中，有好多同事为了省事要用这一整套的脚手架的东西，但是我不可能把项目拷给他们。所以把我的脚手架里面所有的项目内容都清空掉，只留下基本的脚手架的内容并创建一个包放在npm中，让他们自己去拉取。

2. 自定义命令

首先你要知道npm包为什么能在命令行中输入命令就能执行。其实所谓的npm包就是一个node.js的一个模块包。这个时候你就可以npm init 命令来初始化一个node的模块，这个时候你会发现生成了package.json文件，这里面包含了模块的入口文件，默认应该是index.js，我习惯改成bin.js

{
  "name": "sg-vue-cli",
  "version": "1.1.2",
  "description": "superGuid mobile cli",
  "main": "bin.js",
  "bin": {
    "superVueCli": "bin.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Visupervi",
  "license": "ISC",
  "dependencies": {
    "chalk": "latest",
    "commander": "^6.0.0",
    "download-git-repo": "^3.0.2",
    "ora": "^5.0.0"
  }
}

当然还需要自己的自定义命令，所以添加一个bin字段，这里定义的就是命令的名字，后面是指定该命令执行的文件

bin.js如下

#!/usr/bin/env node

/**
 * @Author: visupervi
 * @Date: 2020-08-18 11:21
 * @return:
 * @Description 脚手架文件创建
 */


const program = require('commander');//cmd控制台交互
const ora = require('ora');//进度条
const chalk = require('chalk');//给提示文案着色
const download = require('download-git-repo');//拉取github项目
const fs = require('fs');


// 提示样式
const success = chalk.blueBright;
const error = chalk.bold.red;


const templateUrl = 'direct:https://gitee.com/visupervi/superGuild-vue-cli.git';//github项目地址


program.version('1.1.2')
  .option('-i, init [name]', '初始化项目')
  .parse(process.argv);


// 拉取项目代码

console.log("program.init",program.init);
if (program.init && typeof program.init === "string") {
  const spinner = ora('正在拉取模板...').start();//开启进度条
  download(templateUrl, program.init, {clone: true}, function (err) {
    if (!err) {
      spinner.succeed(success('拉取成功'));
      // 更改 package.json 中的 name 和版本号
      changePackage()
    } else {
      console.log(err);
      spinner.fail('拉取失败');
    }
  });
} else {
  console.error(error('请在init后输入目录名'));
}


// 替换模板package.json文件的name字段
const changePackage = () => {
  fs.readFile(`${process.cwd()}/${program.init}/package.json`, (err, data) => {
    if (err) throw err;
    let _data = JSON.parse(data.toString());
    _data.name = program.init;
    _data.version = '1.0.0';
    let str = JSON.stringify(_data, null, 4);
    fs.writeFile(`${process.cwd()}/${program.init}/package.json`, str, function (err) {
      if (err) throw err;
    })
  });
};

3. 发布

首先登陆npm npm login 然后npm publish

4.使用

安装：npm i superguid-vue-cli
创建项目：superguid-vue-cli -i test
根据脚手架安装依赖：yarn install / yarn install
运行：yarn run dev / npm run dev