网站首页 > 技术文章 正文
在工作中我们会用到很多便捷的脚手架工具,比如Vue的vue-cli,React的create-react-app等。极大的提高了我们的工作效率,那么今天我们就来学学怎么制作一款自用的前端脚手架。
核心依赖
- commander 命令行工具
- download-git-repo git仓库代码下载
- chalk 命令行输出样式美化
- Inquirer.js 命令行交互
- ora 命令行加载中效果
- didyoumean 脚本命令匹配
- fs-extra fs的替代品。
- log-symbols 日志着色
- semver 语义化日志控制
- validate-npm-package-name 校验包名
项目结构
项目搭建
- 在一个空文件下执行npm init
- 将以上依赖全部安装,执行npm install commander ... validate-npm-package-name -S
1.初始化
在根目录下新建`bin/luchx.js`文件,并添加以下代码
首先文件第一行表示该文件运行于node环境,接着引入commander。最后的program.parse方法用于解析命令行中传入的参数。
2.添加第一个指令
command命令有两种用法,官方示例如下:
其中参数对应的<>, [ ]分别代表必填和选填。这里我们使用第一种,添加如下代码:
3.添加监听--help事件
执行结果
交互说明
1.在根目录下创建lib文件,并添加create.js文件。
2.校验包名
3. inquirer.js 处理命令交互
4. 封装下载文件lib/downloadFromRemote.js
5. 添加下载操作
运行
本项目没有发布到npm上,仅作学习研究之用,可以自己拉取项目然后执行npm link,在本地体验。为了可以全局使用,我们需要在package.json里面设置一下,这样就可以执行luchx命令开头的指令了。
Bash
"bin": {
"luchx": "bin/luchx.js"
},
以上完整的代码可以访问[github查看获取](https://github.com/luchx/ECHI_CLI)
参考
- vue-cli Vue.js 开发的标准工具
- commander node.js 命令行接口的完整解决方案
- Inquirer 命令行交互工具
- 上一篇: 从零搭一个自用的前端脚手架
- 下一篇: 自主搭建5个精品脚手架,玩转前端提效
猜你喜欢
- 2025-05-26 Wee – 为现代 Web 开发打造的 CSS 脚手架
- 2025-05-26 中建工地高颜值的“秘诀”:盘扣式外架+定型化网片
- 2025-05-26 你没见过的新型花篮外架技术更快捷更方便,值得推广
- 2025-05-26 图解:盘扣式脚手架搭建步骤
- 2025-05-26 收藏!2022最新工字钢悬挑脚手架做法和规范,萌新必看
- 2025-05-26 「架构师必备」基于SpringCloud的SaaS型微服务脚手架
- 2025-05-26 使用 Vue 脚手架,为什么要学 webpack?(一)
- 2025-05-26 新型梁侧预埋式外脚手架连墙件施工工艺和流程
- 2025-05-26 SpringBoot+LayUI后台管理系统开发脚手架
- 2025-05-26 推荐一款超棒的SpringCloud 脚手架项目
你 发表评论:
欢迎- 508℃Oracle分析函数之Lag和Lead()使用
- 507℃几个Oracle空值处理函数 oracle处理null值的函数
- 499℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 492℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 485℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 478℃【数据统计分析】详解Oracle分组函数之CUBE
- 459℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 459℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端富文本编辑器 (47)
- 前端路由 (61)
- 前端数组 (73)
- 前端定时器 (47)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)