<div id="js_content">
<h2>前言</h2>
<p>开始本篇文章前，我们先来思考几个问题：</p>
<ul><li><p>平时自己创建新项目的流程是怎么样的？</p></li><li><p>团队为了落地规范化（git 提交规范、代码规范、文档规范等），做了哪些事情？</p></li></ul>
<p>我想大部分同学肯定都是这样回答的：现在社区都有开箱即用的脚手架，像<code>vue-cli</code>、<code>create-react-app</code>这种，我们直接用脚手架来创建项目就可以了啊。</p>
<p>上面这种方式也是我所在的团队最开始的<code>基操</code>，但是随着团队成员的快速增加和业务的飞速迭代，有很多问题逐渐暴露出来：</p>
<p>大部分业务场景是相似的，那么对于基础框架结构的诉求（这里包括工具类、接口封装、环境变量配置、eslint 配置、git-hook 等）都是一样的。如果每次大家都从零开始，那么只会徒增很多毫无意义的重复性工作。</p>
<p>这里你可能会说：那我们简单的复制粘贴就可以了啊～</p>
<p>那你有没有感觉这种方式不太优雅呢？暂且不去评估这种方式的优缺点，如果后续基础框架结构发生调整，那么你是不是要继续坚持<code>cv</code>大法呢？</p>
<p>上面说了这么多，其实就是两个重点：</p>
<ul><li><p>效率</p></li><li><p>复用性</p></li></ul>
<p>我们团队内部也是发现了上述问题，结合自己的具体业务场景，自研了一套<code>cli</code>,主要也是基于<code>Vue Cli</code>打造而来，功能包含：</p>
<ul><li><p>支持基于<code>Vue</code>和<code>React</code>的不同模板</p></li><li><p>统一的项目目录结构</p></li><li><p>丰富的工具类库</p></li><li><p>初始化配置文件</p></li><li><p>预定义的共用组件</p></li><li><p>丰富的命令行提示</p></li></ul>
<p>这里关于<code>Vue-Cli</code>的具体操作我就不演示了，直接进入正题。</p>
<h2>需要做哪些准备</h2>
<p>其实，也就是来看下主要借助了哪些第三方库的能力：</p>
<ul><li><p>commander.js<sup>[1]</sup>，可以自动的解析命令和参数，用于处理用户输入的命令。</p></li><li><p>download-git-repo<sup>[2]</sup>，下载并提取 git 仓库，用于下载项目模板。</p></li><li><p>Inquirer.js<sup>[3]</sup>，通用的命令行用户界面集合，用于和用户进行交互。</p></li><li><p>ora<sup>[4]</sup>，下载过程久的话，可以用于显示下载中的动画效果。</p></li><li><p>chalk<sup>[5]</sup>，可以给终端的字体加上颜色。</p></li><li><p>log-symbols<sup>[6]</sup>，可以在终端上显示出 √ 或 × 等的图标。</p></li></ul>
<p>这些第三方库的链接我都有在文中标出，对应的<code>api</code>也都相对简单，大家可以自行前往查看具体的使用，这里就不展开说明了。</p>
<h2>初始化项目</h2>
<p>首先创建一个空项目，命名为 <code>cosen-cli</code>，然后新建一个 <code>index.js</code> 文件，并写入：</p>
<pre class="blockcode"><code class="language-go">#!/usr/bin/env node
// 使用Node开发命令行工具所执行的JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明
console.log('senlin-cli初始化...')
</code></pre>
<p>再执行 <code>npm init</code> 生成一个 <code>package.json</code> 文件。最后安装上面需要用到的依赖。</p>
<pre class="blockcode"><code class="language-go">npm install commander download-git-repo inquirer ora chalk log-symbols
</code></pre>
<p>然后现在的目录结构就是：</p>
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-c628399d09df238563473e544f87b5e8">
<h2>脚本映射为命令</h2>
<p>初始化项目后，接下来有一步很重要的操作：把脚本映射为命令。</p>
<p>具体操作就是在<code>package.json</code>文件中添加：</p>
<pre class="blockcode"><code class="language-go"> "bin": {
"senlin": "./index.js"
},
</code></pre>
<p>有了脚本后，怎么把脚本链接到全局呢（其实就是像你执行<code>vue</code>命令一样）？</p>
<p>这里只用在<code>当前项目目录</code>下执行<code>npm link</code>就可以了：<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-2275c452fa19f5192108812478500964"></p>
<p>执行完<code>npm link</code>，这时你在命令行输入<code>senlin</code>便可以得到如下输出：<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-42a651ea1f97f0b84a6a8dba201a54e8"></p>
<h2>准备模版</h2>
<p>针对我们的业务场景，我准备了两套模板：</p>
<pre class="blockcode"><code class="language-go">const templates = {
"ts-vue": {
url: "https://github.com/easy-wheel/ts-vue",
downloadUrl: "https://github.com:easy-wheel/ts-vue#master",
description:
"ts-vue是一个中后台前端解决方案，它基于 vue, typ |
|
转播
