首页 > 其他分享 >前端自定义cli

前端自定义cli

时间:2023-01-12 10:46:35浏览次数:60  
标签:resolve const cli 自定义 前端 shell tempPath path name

Windows PowerShell
版权所有 (C) Microsoft Corporation。保留所有权利。

尝试新的跨平台 PowerShell https://aka.ms/pscore6

PS C:\Users\admin> hello
hello world在使用vue-cli的过程中,常用的webpack模板只为我们提供最基础的内容,但每次需要新建一个项目的时候就需要把之前项目的一些配置都搬过来,这样就造成挺大的不方便,如果是作为一个团队,那么维护一个通用的模板,我认为是挺有必要的。

前置知识-可执行模块

npm上边不仅仅存在一些用来打包、引用的第三方模块,还有很多优秀的工具(包括部分打包工具),他们与上边提到的模块的区别在于,使用npm install XXX以后,然后就可以通过命令行直接运行了,如各种脚手架工具、webpack命令等等。

举个例子
hello/packge.json

... 
"bin": {
    "hello": "./bin/index.js"
 }
...

hello/bin/index.js配置
#!/usr/bin/env node,用于指明该脚本文件要使用node来执行。同时也解决了不同的用户node路径不同的问题,可以让系统动态的去查找node来执行你的脚本文件。
还可以指定为 #!/usr/bin/env bash

#!/usr/bin/env node
console.log("hello world");

发包之后,npm install demo  -g。
打开cmd,输入hello按下回车

Windows PowerShell
版权所有 (C) Microsoft Corporation。保留所有权利。
尝试新的跨平台 PowerShell https://aka.ms/pscore6
PS C:\Users\admin> hello
hello world

npm link的使用
在开发阶段,为了验证效果,不可能没改一次都要上传发版。
我们可以npm lin命令 创建全局模块一个连接,指向当前目录
这样每次改动 就会同步到全局

npm link用来在本地项目和本地npm模块之间建立连接,可以在本地进行模块测试
具体用法:

  1. 项目和模块在同一个目录下,可以使用相对路径
    npm link ../module

  2. 项目和模块不在同一个目录下
    cd到模块目录,npm link,进行全局link
    cd到项目目录,npm link 模块名(package.json中的name)

  3. 解除link
    解除项目和模块link,项目目录下,npm unlink 模块名
    解除模块全局link,模块目录下,npm unlink 模块名

前置知识-inquirerJs

它是一个一个NodeJs交互式命令行工具。
力争成为Node.js的易于嵌入且美观的命令行界面。
提供用户界面和查询会话流。

#!/usr/bin/env node
const inquirer = require('inquirer');

inquirer
    .prompt([{
        type: "input",
        name: "name",
        message: "项目名称:",
        default: "hello-word"
    }])
    .then(answers => {
        console.log(answers);
    })

PS C:\Users\admin> hello
? 项目名称: 测试
{ name: '测试' }

前置知识-shelljs

点此进入官方文档
它是Node下的脚本语言解析器,具有丰富且强大的底层操作(Windows/Linux/OS X)权限。
用js代码中编写shell命令实现功能。

它的底层实现是利用‘Nodejs下引入模块child_process实现调用shell’
child_process模块是nodejs的一个子进程模块,可以用来创建一个子进程,并执行一些任务,比如shell命令

原生执行shell

const childProcess = require('child_process');
childProcess.exec('dir', (err, sto)=> {
    console.log(err);
    console.log(sto);
})

PS C:\Users\admin\Desktop\hello> node .\bin\index.js
C:\Users\admin\Desktop\hello
2021/01/25  14:48    

         .
2021/01/25  14:48              ..
2021/01/25  14:29              bin
2021/01/25  14:48              node_modules
2021/01/25  14:29                68 package-lock.json
2021/01/25  14:48               315 package.json
2021/01/25  14:48            10,172 yarn.lock

shelljs执行shell

const shell = require('shelljs');
shell.exec('dir');

效果和原生一样

不过为了抹除平台差异,shell自己也封装了一些方法,比如ls

const shell = require('shelljs');
shell.ls('-l', 'C://Users/admin/Desktop/hello').forEach((file)=>{
    console.log(file.name);
})

前置知识-chalkJs

一般情况下我们给log加颜色,写起来有点费劲。比如说

console.log("%c%s", "color: deeppink; font-size: 18px;", "hello World")

image.png
使用三方包

const chalk = require('chalk');
console.log(chalk.blue('Hello world!'));

思路

我们先创建一个通用模板
模板里某个文件夹放一些备用资源
通过inquirerJs来收集用户的输入,
然后通过shelljs来下载模板
通过手机用户的信息来修改模板内容。
修改的内容大致有以下信息:
全局替换用户输入的项目名字
根据用户选择的三方包,来动态修改packge.json和src相关信息

代码

首先创建一个项目,结构如下

配置入口文件
packge.json

"bin": {
    "aegis": "./bin/index.js"
}

主程序
index.js如下

#!/usr/bin/env node

const inquirer = require('inquirer');
const shell = require('shelljs');
const fs = require('fs');
const path = require('path');
const chalk = require('chalk');

//当前cli的名称 
console.log(chalk.yellowBright.bold('

标签:resolve,const,cli,自定义,前端,shell,tempPath,path,name
From: https://www.cnblogs.com/dingshaohua/p/17045762.html

相关文章

  • 前端模块化概览
    amdrequire.js,依赖前置,预先下载,立即执行index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=......
  • 高频前端面试题:什么是回调函数?
    软件模块之间总是存在着一定的接口,从调用方式上,可以把他们分为三类:同步调用、回调和异步调用同步调用是一种阻塞式调用,调用方要等待对方执行完毕才返回,它是一种单向调用;回......
  • 你知道,前端工程部署有哪些方式嘛?
    你知道,前端工程部署有哪些方式嘛?本文原文地址;此文章是回答知乎问题总结而来。我将其分为四个阶段:手动部署、命令工具部署、docker镜像部署、平台化部署。这几个阶段,越......
  • 前端面试题
    javascript1、请问截至目前JS中的基本数据类型有几种?A、5B、6C、7D、82、document对象模型中,节点类型一共有几种?A、4种......
  • ClickHouse ORM 3.x 发布啦
    经过1年断断续续的迭代,ClickHouseORM3.x发布啦~说说它的故事吧。回顾下2022说来惭愧上次写博客都是22年4月份了,今年行情不好团队急剧收缩,工作几乎全扑在接手存量业务和......
  • 【HTML基础篇003】前端基础之CSS选择器大全
    ✨一、CSS的基本介绍CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。✨二、CSS......
  • 前端使用canvas实现贪吃蛇小游戏
    贪吃蛇是一款益智小游戏,通过点击上下左右四个按键控制蛇头移动。设计思路主要是设计蛇的身体和移动方法。将蛇的身体设置成一个数组,数组里存放蛇身每一节的xy坐标。游......
  • Jmeter学习:配置原件--Random 随机变量/自定义变量/Jmeter 变量作用域和规则
    一、Random随机变量其用法与Counter计数器一样。后两个参数不常用,就不说明了  二、自定义变量通常用于进行脚本的参数化,将多个场景出现的常量采用变量统一替换,简......
  • 前端知识点整理第二天(伪类和伪元素/html5语义化)
    SEO,也就是搜索引擎优化的逻辑,其实是非常简单的。这就像是在大学里的学生会主席,你要让投票者给你更多的选票。那么,你需要先「自我优化」,无论是外表还是能力;此外,你还需获得......
  • 前端分页和后端分页的区别,当后端返回的数据过多给前端时,前端会卡住不动,此时应该考虑后
    问题:这里返回给你600条数据 前端一直在打转,显示不出来?    原因:数据量太大了可能解决方法:改为后端分页就行  current当前页size每页显示条数 ......