创建前端脚手架
2020 年 11 月 25 日 星期三(已编辑)
AI·GEN
关键洞察
看视频王红元老师直播
这篇文章上次修改于 2020 年 11 月 25 日 星期三,可能部分内容已经不适用,如有疑问可询问作者。
脚手架英文单词Scaffold。 在前端我们经常用cli表示脚手架。
脚手架怎么创建?
回顾
Vue & React是如何创建的。
vue create project_name
看一下vue-cli

查看package.json

所以借鉴commander
安装
要制作cli,需要两个文件
package.json 设置和配置入口
index.js 根据cli命令的可执行文件
在package.json中,指定有关当前CLI程序的元数据, name,version,description、author等。
查看版本号
比如命令taoya-tool --version


在Linux和基于Unix的操作系统(例如Mac)中,#! / usr / bin / env node 不仅仅是一个注释。它使用在 /usr/bin/env 中注册的node命令来运行文件。
添加bin属性, 来运行index.js 文件。

可以使用 process.argv 在命令中找到选项,选项以数组形式显示。
你不需要在每次更新 index.js 代码时再次运行 npm i -g,因为你已经将 package.json 的 bin 属性连接到 cli 命令和 index.js 文件。因此,每次调用 cli 命令时,都可以执行 index.js 文件(它不是来自缓存的,因此您可以运行新的更新内容)。
数组中的前两个元素是 node 和 cli 命令的路径。
脚手架已经学的入门了。但是只能自己用。如何发布出去呢?
发布到NPM仓库
控制台打开
查看vue的脚手架

npx create-react-app project_name
yarn add commander
#! /usr/bin/env node
const { program } = require("commander");
// 执行JS代码
console.log("Taoya Tool🧰");
program.version(require('./package.json').version);
➜ taoya taoya-tool --version
Taoya Tool🧰
Version 1.0.1
// 输入
#! /usr/bin/env node
const { program } = require("commander");
console.log("Taoya Tool🧰");
console.log('> ', process.argv);
// 输出
➜ taoya taoya-tool one two three
Taoya Tool🧰
> [
'/usr/local/bin/node',
'/usr/local/bin/taoya-tool',
'one',
'two',
'three'
]
npm login # 登陆npm
npm public
➜ ~ code /usr/local/bin/vue