# why-cli

**Repository Path**: why1235678/why-cli

## Basic Information

- **Project Name**: why-cli
- **Description**: 实现前端脚手架，了解脚手架其中的原理
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-07
- **Last Updated**: 2021-12-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 手写前端脚手架 why-cli
<br />

## 1.必备模块 npm 包
+ commander 命令行参数解析
+ inquirie 命令行交互工具，可以实现命令行的选择功能，输入功能
+ download-git-repo 从 github 下载模板
+ chalk 颜色
+ metalSmith 读取所有文件，实现模板渲染
+ consolidate 统一模板引擎

<br />

## 2.工程创建
### 2.1创建目录

<br />

  * |--bin
    * |--www //全局命令执行文件
  * |--src
    * |-- create.js // create 命令逻辑
    * |-- config.js // config 命令逻辑
    * |-- main.js   // 入口文件
    * |-- utils     // 存放工具方法

<br />
  
### 2.2初始化项目
  * 生成 pakeage.json
       
    `npm init -y`  
  * pakeage.json 中设置命令

    `"bin": {`

        "why-cli": "./bin/www.js"

    `}`

  * www 文件中，使用node环境执行此文件，使用main作为入口文件
  
    `#! /usr/bin/env node`
        
    `require('../src/main.js)`

  * 链接包到全局下使用
  
    `npm link`
    
    尝试在命令行执行 why-cli，cmd 窗口打印出结果

### 2.2 使用 eslint   
  * 安装 eslint
   
    `cnpm i eslint --save-dev`
  * 初始化 eslint 配置文件
   
    `npx eslint  --init`
### 2.3 使用 commander 获取版本号
  * 安装 commander
  
    `cnpm i commander --save-dev`
  
    `
       program
    .command("create") // 命令名称
    .alias("c") // 命令别名
    .description("create a project") // 该命令的描述信息
    .action(() => {
      // 执行该命令的回调
      console.log("create");
    })
    .parse();
    `

    `cnpm i axios --save-dev`
    `cnpm i ora inquirer --save-dev`
    `cnpm i download-git-repo --save-dev`
    `cnpm i ncp --save-dev`
    `cnpm i metalsmith --save-dev` 遍历所有的文件目录，编译模板，只要是模板渲染都需要
    `cnpm i consolidate --save-dev` 返回渲染函数，统一了所有的模板引擎
    `cnpm i ejs --save-dev`

    `npm link`  `npm unlink`
<br />

## 3.解析命令行参数
* 3.1 
<br />

## 4.create命令
* 4.1 
<br />

## 5.config命令
<br />

## 6.项目发布