从一个简单的初始化远程git仓库工具开始学习前端脚手架的建设

1. 开篇

在开始之前我们得知道我们要做的东西是什么样的 -> 一个能根据git地址初始化远程仓库的工具

说到这里你就会说：“git不是提供了一个clone命令给你用吗？”

ok，那我们用clone来看一下他和我们的预期有什么不同

使用clone来下载远程仓库

git clone https://gitee.com/xiao-koa/xiao-koa-demo.git

我们来看看有什么缺陷

1. 项目文件夹的名字不是我们自己定义的
2. 项目的.git文件存在
3. package.json内容不是初始化的 例如：name、version、description…

上诉就是git克隆存在的问题，可能到这你会说动手改一下就好了，何必多此一举去做一个工具。但你点开这篇文章不就是为了学习吗？我们只是举个简单的例子让你体会前端开发工具的流程，在这个基础上你可以随心所欲做你想做的工具，成为别人口中的黑客小子（不是）

ok那么废话不多说直接开始！！！

2. 前提

在学习之前，我们得去看一下世面上的初始化类npm工具有哪些，并且他们的使用方法是什么样的

1. vue-cli

   # vue脚手架，用于初始化vue项目
   ​
   # 1. 先全局安装
   npm install -g @vue/cli
   ​
   # 2. 再使用
   vue create vue01
   

2. vite

   # 新型前端构建工具
   ​
   # 1. 直接使用
   npm init vite
   

可以看到 vite 比 vue-cli 简单便捷，我们来看下npm init xxx做了什么

首先我们使用 init 随便输入一个不存在的包名

npm init woshizhendeshuai

随后就报错了

C:\Users\Administrator>npm init woshizhendeshuai
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/create-woshizhendeshuai - Not found
npm ERR! 404
npm ERR! 404  'create-woshizhendeshuai@latest' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
​
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Local\npm-cache_logs\2022-10-15T02_59_27_512Z-debug-0.log

从上面就可以看出来是没有找到这个包名create-woshizhendeshuai@latest,原来使用 init 的时候npm会帮我们自动在名字前面加上create-，所以我们想要使用这个功能就需要将库的名字前面加上create-，至于那个@latest是指下载版本最新包。

关于npm init xxx我们就暂时讲到这里，后面就够用了，有兴趣的请自行查阅相关文章。

3. 初始化

从上面可以看出使用npm init xxx还是很方便的，所以我们这个项目就用这个功能。

1. 新建文件夹，名称为create-git-store，注意：必须使用create开头

2. 初始化项目

   npm init -y && npm i typescript --save-dev && npx tsc --init && npm i --save-dev @types/node
   

3. 在项目里面新建src文件夹，在文件夹下面创建index.ts

   #!/usr/bin/env node
   console.log('hello utils');
   

4. 在package.json的scripts里面添加

     "scripts": {
       "dev": "npx ts-node ./src/index.ts"
     },
   

5. 运行npm run dev，如果你在控制台看到输出字符就代表你大功告成了！！！

   PS E:\轩小浅\create-git-store> npm run dev
   
   > create-git-store@1.0.0 dev
   > npx ts-node ./src/index.ts
   
   hello utils
   

4. 解析命令

我们的命令是设计成这样的

npm init git-store project https://gitee.com/xuanxiaoqian/qian-cli.git mater

npm init git-store <项目名称> <远程