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)
})

8.调试

在运行代码时,需要本地调试,可通过下面命令的形式调试。

node ./bin/my-cli.js

例:

node ./bin/my-cli.js

9.全局安装

我们进入npm全局安装的文件里:

cd /usr/local/lib/node_modules

注意:我的是mac,如果你是window此方式不能进去,你需要自己寻找一下具体目录。

我们可以看到目前我们全局安装的npm包,如下:

全局已经安装的npm包

在我们 my-cli 目录下执行:

npm install -g

每当你修改内容时,需要再次npm install -g,否则内容将不会生效

这时,我们可以看到全局安装npm包的目录下多了我们的脚手架:

/usr/local/lib/node_modules

然后,我们找到任意目录执行:

my-cli

就可以看到命令行对于我们脚手架的提示了:

my-cli

然后我们执行我们的脚手架的安装命令:

my-cli init
my-cli init

由于本程序最后我只是做个简单的输出演示操作,故此没有任何文件产生。

10.将编写好的cli发布到npm中

参考:发布一个 npm 包,构建自己的第三方库

11.cli脚手架的使用

命令行输入my-cli查看帮助