NodeJS: 从零开始做一个类似vue-cli的简单脚手架

1.安装node

你需要安装node。安装好后可以通过 node -v 查看node版本。

2.创建文件与初始化

我用的是Mac（windows同理），在终端，任意目录下，执行下面命令：

mkdir my-cli
cd my-cli
npm init -y

3.创建项目结构

mkdir bin script docs
touch index.js REDEAD.md bin/my-cli.js script/init.js

4.安装必要包

npm install chalk co-prompt co commander download-git-repo inquirer ora --save-dev

包说明：
download-git-repo
commander
chalk
co-prompt
co
inquirer
ora

5.修改package.json

在package.json文件中加入bin命令

{
  "name": "my-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
    "my-cli": "./bin/my-cli.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chalk": "^4.1.0",
    "co": "^4.6.0",
    "co-prompt": "^1.0.0",
    "commander": "^7.1.0",
    "download-git-repo": "^3.0.2",
    "inquirer": "^8.0.0",
    "ora": "^5.4.0"
  }
}

6.其他辅助文件配置

新建 .editorconfig，.gitignore等文件

touch .editorconfig .gitignore .npmrc

.editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

.gitignore

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

.npmrc

save-exact=true

至此，项目结构如下：

项目结构

7.编写内容

bin/my-cli.js 是主文件，作为整个脚本运行的入口。

index.js我们作为主要内容文件。

bin/my-cli.js

#!/usr/bin/env node
require('../index')

注意：文件开头需要加上 #! /usr/bin/env node，用来说运行环境。

index.js


const {
    resolve
} = require("path")
const program = require("commander")
const packageJson = require("./package.json")

const res = command => resolve(__dirname, 'script/', command)

process.env.NODE_PATH = __dirname + "/node_modules"

console.log(process.env.NODE_PATH, res("init"))

program
    .version(packageJson.version)

program
    .usage("<command>")

program
    .command("init")
    .description("Generate a new node project")
    .alias("i")
    .action(() => {
        require(res("init"))
    })

program.parse(process.argv)


// 判断终端上输入出来bin中的命令是否还有其他值，如果没有终端会直接输出help
if (!program.args || program.args.length === 0) {
    program.help()
}

script/init.js是运行 my-cli init时，执行的内容，如下：

const inquirer = require("inquirer");
const program = require("commander");
const chalk = require("chalk");
const download = require("download-git-repo");
const ora = require("ora");
const spinner = ora("Downloading please wait......");
const fs = require("fs");
const path = require("path");
const option = program.parse(process.argv).args[0];
const defaultName = typeof option === "string" ? option : "my-app";

const questionList = [{
  type: 'input',
  name: 'Project name',
  message: 'Project name',
  default: defaultName,
  filter(val) {
    return val.trim()
  },
  validate(val) {
    const validate = (val.trim().split(" ")).length === 1
    return validate || 'Project name is not allowed to have spaces ';
  },
  transformer(val) {
    return chalk.blue(val);
  }
}, {
  type: 'input',
  name: 'description',
  message: 'Project description',
  default: '这是一个项目',
  validate(val) {
    return true;
  },
  transformer(val) {
    return chalk.blue(val);
  }
}, {
  type: 'input',
  name: 'author',
  message: 'Author',
  default: 'author',
  validate(val) {
    return true;
  },
  transformer(val) {
    return chalk.blue(val);
  }
}, {
  type: "list",
  name: "program type",
  message: "程序类型",
  choices: [
    "Nodejs",
    "Typescript"
  ],
  default: "nodejs",
  filter: function(val) {
    return val.toLowerCase();
  }
}]

// 根据用户选择的语言去配置对应的配置文件
inquirer.prompt(questionList).then(answers => {
  console.log(answers)
  spinner.start();
  setTimeout(() => {
    spinner.stop();
    console.log(chalk.red("项目初始化成功"));
  }, 500)
})