shares-cli

构建属于自己的CLI工具

前言

CLI，全称是command-line interface，也就是命令行交互接口。无论是在前端还是后端，都可以用于在构建时通过命令快速生成项目或模板等。例如前端的vue-cli（Vue前端开发脚手架），后端的dva-cli（Ant Design后端开发脚手架）等

需求

那么如何构建属于自己的CLI工具呢，在项目开发时可以快速生成自己需要的代码模板，去除重复工作，并且还可以为其他的开发者提供快速入门的使用呢？我们的具体需求如下：

1，通过执行命令，自动生成项目代码模板

2，项目代码模板可以自定义编辑

3，CLI可以通过软件包形式分发，其他开发者可以简单使用

整体架构

这里模版的概念是指一个项目的样板，包含项目的完整结构和信息。模版的信息都存放在一个叫做templates.json的文件当中。用户可以通过命令行对templates.json进行添加、删除、罗列的操作。通过选择不同的模版，会自动从远程仓库把相应的模板拉取到本地，完成项目的搭建。

需要的依赖模块

package name	desc	link
commander	用于处理命令行相关工具	https://github.com/tj/commander.js
download-git-repo	用于下载git仓库	https://github.com/flipxfx/download-git-repo
chalk	处理终端信息显示的颜色	https://github.com/chalk/chalk
inquirer	交互终端，用于处理用户输入	https://github.com/SBoudrias/Inquirer.js
ora	终端loading解决方案	https://github.com/sindresorhus/ora
shelljs	shell 命令执行, 支持回调	https://github.com/shelljs/shelljs
read-metadata	用于读取json或者yaml元数据文件并返回一个对象	https://www.npmjs.com/package/read-metadata
minimatch	字符匹配工具	https://github.com/isaacs/minimatch
semver	版本号处理工具	https://github.com/npm/node-semver
user-home	用于获取用户的根目录	https://github.com/sindresorhus/user-home
tildify	Convert an absolute path to a tilde path: /Users/sindresorhus/dev→~/dev`	https://github.com/sindresorhus/tildify
rimraf	A deep deletion module for node (like rm -rf)	https://github.com/isaacs/rimraf
axios	跨平台的ajax处理工具	https://github.com/axios/axios
handlebars	易于构建的模板引擎	https://github.com/wycats/handlebars.js
metalsmith	An extremely simple, pluggable static site generator.	https://github.com/segmentio/metalsmith
multimatch	对 minimatch 的多字符串处理的扩展	https://github.com/sindresorhus/multimatch
consolidate	支持多种模板引擎的渲染	https://github.com/tj/consolidate.js
async	用于异步代码的高阶函数和通用模型	https://github.com/caolan/async
validate-npm-package-name	用于验证npm包	https://github.com/npm/validate-npm-package-name
figlet	A FIG Driver written in JavaScript which aims to fully implement the FIGfont spec.	https://github.com/patorjk/figlet.js

Quickstart

npm install -g shares-cli
# or
yarn global add shares-cli

// list available templete
shares list
// output usage information
shares list -h
// params: Template view under the specified warehouse
shares list -u aurorafe -p vue
// output usage information
shares init -h
// generate project
shares init shares-gis/maptalks-plugin-tpl-base project
// Defaults associated repository `aurorafe`, so, you can use
shares init vue-template-webpack project
// Use cached template
shares init --offline vue-template-webpack project
cd project
npm i
npm run dev

example

shares list vue // list vue project templete
shares list react // list react project templete
shares list library // list javascript library templete
shares list react-component // list react component templete
shares list vue-component // list vue component templete

// init
shares init vue-template-webpack project // repo
shares init aurorafe/vue-template-webpack project // user/repo
shares init --offline vue-template-webpack project // Use cached template
shares init -c direct:https://github.com/aurorafe/vue-template-webpack.git project // Use git clone ~ direct is important

Resource

vue & vue-component

// list
shares list vue // or
shares list -u vuejs-templates // list vue project templete
shares list vue-component // list vue component templete

// init
shares init vue-template-webpack project // repo
shares init aurorafe/vue-template-webpack project // user/repo
// or
shares init vuejs-templates/webpack project // or other template

// components template
shares init vue-component-template-webpack project // build your own component

react & react-component

shares list react // list react project template
shares list react-component // list react component templete

// init
shares init react-template-webpack project // repo
shares init aurorafe/react-template-webpack project // user/repo or other template

// components template
shares init react-component-template-ts project // build your own component

library (javascript library)

shares list library // list library template

// init build your own javascript library
shares init library-template-rollup project

Development

git clone https://github.com/liutaochange/shares-cli.git
cd shares-cli
npm link
shares -h