Javascript is required
创建前端脚手架
前端

脚手架英文单词Scaffold。 在前端我们经常用cli表示脚手架。

脚手架怎么创建？

回顾

Vue & React是如何创建的。

vue create project_name

npx create-react-app project_name

看一下vue-cli

image-20201125210503183

查看package.json

image-20201125210544132

所以借鉴commander

安装

yarn add commander

尝试

要制作cli，需要两个文件

package.json 设置和配置入口

index.js 根据cli命令的可执行文件

在package.json中，指定有关当前CLI程序的元数据, name，version，description、author等。

查看版本号

比如命令taoya-tool --version

image-20201125211557682

#! /usr/bin/env node

const { program } = require("commander");

// 执行JS代码
console.log("Taoya Tool🧰");


program.version(require('./package.json').version);

image-20201125210124525

➜  taoya taoya-tool --version
Taoya Tool🧰
Version 1.0.1

在Linux和基于Unix的操作系统（例如Mac）中，＃！ / usr / bin / env node 不仅仅是一个注释。它使用在 /usr/bin/env 中注册的node命令来运行文件。

添加bin属性， 来运行index.js 文件。

image-20201125215925592

cli的process.argv

可以使用 process.argv 在命令中找到选项，选项以数组形式显示。

你不需要在每次更新 index.js 代码时再次运行 npm i -g，因为你已经将 package.json 的 bin 属性连接到 cli 命令和 index.js 文件。因此，每次调用 cli 命令时，都可以执行 index.js 文件（它不是来自缓存的，因此您可以运行新的更新内容）。

// 输入
#! /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'
]

数组中的前两个元素是 node 和 cli 命令的路径。

将代码发布出去

脚手架已经学的入门了。但是只能自己用。如何发布出去呢？

发布到NPM仓库

https://www.npmjs.com/

控制台打开

npm login # 登陆npm

npm public

补充

查看vue的脚手架

➜  ~ code /usr/local/bin/vue

image-20201125212219152