nodejs

前端CLI脚手架

Posted by huangqing on January 10, 2022

vite cli

入门须知

  • commander （实现 NodeJS 命令行）
  • minimist 轻量级的用于解析命令行参数的工具
  • yargs Yargs be a node.js library fer hearties tryin’ ter parse optstrings

  • meow

  • inquirer （实现命令行之间的交互）
  • prompts : 让命令行与用户进行交互的工具,与 Inquirer.js 功能差不多。

  • enquirer命令行的提示

  • chalk （控制台字符样式）
  • kolorist 轻量级的使命令行输出带有色彩的工具
  • log-symbols （为各种日志级别提供着色符号）

  • progress 命令行进度条

  • download （实现文件远程下载）
  • fs-extra （增强的基础文件操作库）

  • handlebars （实现模板字符替换）

  • ora （优雅终端 Spinner 等待动画）

  • update-notifier （npm 在线检查更新）

  • shelljs 跨平台 Unix shell 命令 的 node 封装
  • cash: 跨平台 linux 命令 的 node 封装, 与 shelljs 功能差不多。
  • blessed-contrib 命令行图表

更多关于命令行的工具库可以参考 command-line-utilities。

比较常用的命令行 APP

babel、webpack、rollup、eslint 等，但这些不仅仅是命令行工具。

下面介绍一些纯命令行应用：

更多纯命令行应用可以参考 command-line-apps。

npm init && npx

npm init 用法：

npm init [--force|-f|--yes|-y|--scope]
npm init <@scope> (same as `npx <@scope>/create`)
npm init [<@scope>/]<name> (same as `npx [<@scope>/]create-<name>`)

npm init <initializer> 时转换成npx命令:

  • npm init foo -> npx create-foo
  • npm init @usr/foo -> npx @usr/create-foo
  • npm init @usr -> npx @usr/create
# 运行
npm init vue@next
# 相当于
npx create-vue@next

node_modules/.bin/vite -v
# vite/2.6.5 linux-x64 node-v14.16.0

# 等同于
# package.json script: "vite -v"
# npm run vite

npx vite -v
# vite/2.6.5 linux-x64 node-v14.16.0

# 无需全局安装
npx @vue/cli create vue-project
# @vue/cli 相比 npm init vue@next / npx create-vue@next 很慢。

文件目录

js-plugin-cli
├─ .gitignore
├─ .npmignore 
├─ .prettierrc 
├─ LICENSE
├─ README.md
├─ bin
│  └─ index.js
├─ lib
│  ├─ init.js
│  ├─ config.js
│  ├─ download.js
│  ├─ mirror.js
│  └─ update.js
└─ package.json

注册指令

当我们要运行调试脚手架时，通常执行 node ./bin/index.js 命令.使用cli时通常使用注册的指令。

打开 package.json 文件，先注册下指令：

 "name": "create-v",
 "main": "./bin/index.js",
  "bin": {
    "create-v": "./bin/index.js"
  },

bin 下的 create-v 就是我们注册的指令,名称尽可能的简介，如 vue vite

实现一个简单的cli

让 create-v -v 这个命令能够在终端打印出来。

打开 bin/index.js 文件，编写以下代码:

#!/usr/bin/env node

// 请求 commander 库
const program = require('commander')

// 从 package.json 文件中请求 version 字段的值，-v和--version是参数
// 命令行执行 create-v template -v
program.version(require('../package.json').version, '-v, --version')

// 命令行执行 create-v template
program
  .command('template')
  .description(
    'Download template from gitlab.'
  )
  .action(() => {
    //TODO:download
  });

// 命令行执行 create-v project_name  或 npx init v project_name
program
  .argument('<project_name>', 'create a project')
  .action((project) => {
    //TDDO:create
  });

// 解析命令行参数
program.parse(process.argv)

其中 #!/usr/bin/env node （固定第一行）必加，主要是让系统看到这一行的时候，会沿着对应路径查找 node 并执行

调试阶段时，为了保证 create-v 指令可用，需要在项目下执行 npm link（不需要指令时用 npm unlink 断开）;

link 完后,我们可以通过npm ls -g查看是否成功(有当前文件夹被映射到全局包中说明 link 成功)

测试完成后， 使用 npm uninstall create-v -g 对关联进行解绑

参考

CATALOG
    FRIENDS