CLI的使用_cli使用-CSDN博客

本文链接：https://blog.csdn.net/qq_24147051/article/details/132318763

使用create-node-cli

大前端
https://ata.alibaba-inc.com/articles/232221

create-node-cli

地址：create-node-cli - npm
学习资料：实现一个Node CLI - 简书
视频教程：写一个属于自己的CLI工具_哔哩哔哩_bilibili

github地址：https://github.com/iambran/gwc/blob/main/utils/cli.js

create-node-cli使用实例

因为看不了历史内容需要改一下参数

效果

开始读取内容

创建对应的文件夹

比如使用命令：

gwc -n MyComponent.js    // -n是 cli文佳夹中 name配置的缩写

规范输入文件的名称

进行对用的名称转换

开始执行两个命令

将文件内容写进新的文件里面

使用yemon

学习yeman博客：https://www.cnblogs.com/gqx-html/p/13469497.html

参考地址：yeoman构建脚手架的神器 - 知乎

yeman官网：The web's scaffolding tool for modern webapps | Yeoman

最好进行全局安装 -g

去掉前面的generator进行运行

生成cli

使用cli

link到全局范围

link完成后就可以使用新加的模块命令了

安装依赖

使用yoman的步骤

使用web网页应用

地址：Generators | Yeoman

自定义generator

抽离自己业务定制的业务（比如：axios,http,图片处理）

yoman的generator必须使用名称

先初始化一下 tnpm init 然后安装 yeoman-generator 里面包含很多可以使用的方法

链接到全局，变成全局模块

升级yoman

解法降低版本：

结果

根据模板创建文件

模板都放在templates里面，借助EJS模板输出数据

获取文件路径，并且templates必须在app 的目录下面；

接收用户数据

通过命令行询问获取数据

Vue Generator案例

拷贝所有文件到templates

测试只是输入一个目录名

writing进行一个批量的生成。先把需要变化的地方都改成模板的形式

全部换成EJS的模板标记，如果是类似 BASE_URl这种原样生成的，则改写成<%% = BASE_URl %%>

writing()方法把每一个文件通过模板转换到目标路径

templates对应的每个文件的相对路径, 在writing中进行遍历

    this.fs.copyTpl(
        this.templatePath(item), 
        this.destinationPath(item), 
        this.answer
    )

发布 Generator

发布generator其实就是发布一份npm的模块

1、先忽略node_modules;

2、初始化一个空仓库；

3、status查看当前状态；

4、发现文件没有被跟踪，使用 git add 进行添加；

5、进行一次提交

6、创建一个远程的github 的仓库

获取到远端的仓库地址

7、数据关联到远端的仓库地址（为本地仓库添加一个远端仓库的别名）

使用push把本地代码发到远端的分支上面；

8、开始发布模块

tnpm publish

第一次的话，会输入用户名和密码

如果出现镜像问题，可能是淘宝镜像问题，这时候发布的时候可以替换镜像

9、去npm的官网查看

使用PLOP

为什要使用plop

1、因为当您独立于代码创建样板时，您自然会在其中投入更多的时间和思想；

2、因为在创建每个路由、组件、控制器、助手、测试、视图等时，可以为你的团队(或你自己)节省5-15分钟……真正增加；

3、因为上下文切换非常昂贵，而且节省时间并不是自动化工作流的唯一好处；

主要用去创建项目中创建同类型的项目文件；（会集成在项目中）

直接生成对应的每个component文件；

使用：在命令行直接使用plop

plop的使用

参考文章：

Plop小型脚手架工具使用说明_大丁37821的博客-CSDN博客

什么是Plop和Handlebars以及相关配置与常用API（plop篇） - 简书

参考github: https://github.com/ahwgs/fast_h5_vue/blob/master/package.json

plop官网：GitHub - plopjs/plop: Consistency Made Simple

安装plop

tnpm install plop -D

该plop对象公开了包含该setGenerator(name, config)函数的 plop API 对象。这是您用来（等待它）为此 plopfile 创建生成器的函数。在plop此目录（或任何子目录）中从终端运行时，将显示这些生成器的列表。

开始使用：

在项目的根目录创建plopfile.js的文件

使用模板

启动plop

以为npm会自动找到对用的 bin 下面plop的命令

创建多个模板

配置script直接调用

{
  "name": "testplop",
  "version": "1.0.0",
  "description": "this is good plop",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "new": "plop"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "plop": "3.1.1"
  }
}