当前位置: 首页 > news >正文

重构Action-cli前端脚手架

一、概述

最近一年,为了满足公司业务开发,解决重复搭建项目繁琐过程,自己开发了一个前端脚手架,并发布到npm。随着时间的推移,发现之前的版本存在很多问题,有些功能做不到位,而且代码也不是很规范,流程逻辑混乱等等。因此,为解决这些问题,我决定对其进行重构,添加检查更新版本功能,优化打包,将多个文件打包成单个cjs文件,支持更多的自定义以及快速克隆运行。

如果之前对这个项目没有了解的同学,可以去看上一篇关于脚手架开发的文章。

实现一个自定义前端脚手架_前端自定义脚手架-CSDN博客

二、实践

2.1、设计思路

  1. 提供命令行交互界面方便用户输入信息。
  2. 根据用户输入的信息从远端Git仓库拉取项目模板初始化项目。
  3. 发布到NPM,以便团队成员共享使用。
  4. 命令设计如下表2-1所示。
表2-1 命令设计
命令描述选项描述
create <project-name>初始化项目

-f,--force

如果project-name已经存在,是否强制覆盖。
-t,  --template [template-name]制定模板或git仓库链接
-r, --run克隆项目后是否自动运行
-c, --command [command]在自动运行模式,自定义运行命令
-pm, --packageManager [packageManager]指定包管理器
-b, --branch [branch-name]指定克隆分支
list显示所有模板--

add <template-name> <template-url>

新增模板配置--
remove <template-name>删除模板配置--
update更新脚手架--
ui界面操作

-p, --port [port]

指定端口 (number)

-h, --host [host]

指定主机名称 (string)
---V,--version显示版本号
-h,--help显示可用的CLI选项
help [command]显示命令帮助信息--help显示命令帮助信息

 2.2、初始化项目

项目初始化可以去看之前的文章,这里不再赘述。

实现一个自定义前端脚手架_前端自定义脚手架-CSDN博客

脚手架运行入口文件改为bin目录下,并在这里指定nodejs运行环境(#! /usr/bin/env node)

// ./bin/index.js
#! /usr/bin/env node
require('../dist/index.js')

开新分支,从主分支开出v1.0.7和dev分支,分别用于保存之前版本的代码和现在开发的分支代码,最后会将dev分支合并到主分支。 

2.3、配置Rollup打包

安装依赖

pnpm add rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-node-externals@5  @rollup/plugin-json @rollup/plugin-terser rollup-plugin-typescript2 rollup-plugin-copy --save-dev

修改./package.json

"scripts": {"build": "rollup -c rollup.config.js --bundleConfigAsCjs",// ...
}

新建rollup.config.js并配置

import { defineConfig } from "rollup";
import nodeResolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import externals from "rollup-plugin-node-externals";
import json from "@rollup/plugin-json";
import terser from "@rollup/plugin-terser";
import typescript from "rollup-plugin-typescript2";
import copy from "rollup-plugin-copy";export default defineConfig([{input: {index: "src/index.ts",},output: [{dir: "dist",format: "cjs",},],plugins: [nodeResolve(),externals({devDeps: false, // 可以识别我们 package.json 中的依赖当作外部依赖处理 不会直接将其中引用的方法打包出来}),typescript(),json(),commonjs(),terser(),copy({targets: [{src: "src/templates.json", // 源路径dest: "dist", // 目标路径}, // 复制 templates.json 到 dist 目录下],copyOnce: true, // 只复制一次}),],},
]);

改造完成的项目结构

运行打包报错

2.4、解决打包错误

解决问题的思路:

第一种,直接复制报错信息到浏览器搜索相关解决文章。

第二中,就是根据报错信息,去github找到报错包相关issue,里面可能会有一些同学有同样的错误经历,可以参考他们如何解决。

错误:Cannot use import statement outside a module

解决:复制错误到浏览器搜索,【解决 SyntaxError: Cannot use import statement outside a module 报错问题】-CSDN博客

// ./package.json 
{ // 新增 "type":"module" 
}

错误:[!] (plugin rpt2) RollupError: [plugin rpt2] Incompatible tsconfig option. Module resolves to 'CommonJS'. This is incompatible with Rollup, please use 'module: "ES2015"', 'module: "ES2020"', 'module: "ES2022"', or 'module: "ESNext"'.

解决:

// tsconfig.json 
{ "compilerOptions": { "module": "ESNext", }, }

错误:不能读取json文件

解决:

// tsconfig.json 
{"compilerOptions": {// ... "resolveJsonModule": true,},
}

错误:[!] (plugin rpt2) RollupError: [plugin rpt2] error TS5070: Option '--resolveJsonModule' cannot be specified when 'moduleResolution' is set to 'classic'.

解决:

{"compilerOptions": {// ... "moduleResolution": "node","resolveJsonModule": true,"esModuleInterop": true,},
}

错误:[!] (plugin rpt2) RollupError: [plugin rpt2] src/commands/create/index.ts:11:16 - error TS2354: This syntax requires an imported helper but module 'tslib' cannot be found.

解决:

This syntax requires an imported helper but module ‘tslib‘ cannot be found-CSDN博客

pnpm i tslib -D
// tsconfig.ts{"compilerOptions": { // ... "paths": {"tslib": ["node_modules/tslib/tslib.d.ts"]},},
}

npm run build成功打包

打包后运行node ./dist/index.js

报错:

解决:删除package.json中的”type“:"module"即可。

项目根目录下打开命令行窗口,运行测试。

2.5、发布npm包

1. 编写README.md

在README.md编写我们npm包的相关使用说明。

使用Static Badge | Shields.io生成专属图标,选择md格式就可以复制到README.md文档。

2. 设置npm源

因为要把开发的脚手架上传到npm,需要把镜像源改回npm官方源,上传npm后再改回镜像源即可。

https://registry.npmmirror.com

# 查看
npm config get registry
# 设置npm官方源
npm config set registry https://registry.npmjs.org/

3. 登录npm

npm login

按enter建,打开浏览器 

输入账号密码登录 

验证 

 登录成功

4. 修改npm版本

重新发包,需要修改package.json里面version版本

# 打补丁,增加第三位(0.0.x)
npm version patch
# 添加功能,增加第二为位(0.x.0)
npm version minor
# 大版本更新,增加第一为位(x.0.0)
npm version major

 需要先提交git后才能修改版本好号

5. 发布npm

npm publish

发包报错,把package.json里的private改为false或删掉,再打包发布就可以了 

 打包发布

一直卡在publishing这里

修复package.json配置错误,去掉上图的警告

npm pkg fix

一直卡再正在发包,直到请求超时报错,因为网络可能存在代理的原因,检查电脑是否开启代理,反复开关代理测试发包,最后也是通过DevSiderCar开启npm加速才能成功重新发包。

登录npm官网就能看到刚刚发的包 

action-cli - npmicon-default.png?t=O83Ahttps://www.npmjs.com/package/action-cli

2.6、代码仓库

具体实现过程和使用,大家可以参考我的GitHub仓库地址。GitHub - Topskys/action-cli: 【前端脚手架】研究和着手搭建前端项目脚手架 https://www.npmjs.com/package/action-cli【前端脚手架】研究和着手搭建前端项目脚手架 https://www.npmjs.com/package/action-cli - Topskys/action-cliicon-default.png?t=O83Ahttps://github.com/Topskys/action-cli.git

三、效果

新版本help界面效果与之前版本多了update命令

创建项目,不带任何参数

查看所有模板文件

新增模板文件 

删除模板文件,更新脚手架 

从npm远程下载安装脚手架

npm install -g action-cli

指定参数创建项目,demo 为项目名称,-f 强制覆盖,-t 指定模板(模板名称或仓库地址),-r 下载项目后自动运行,-c 自定义运行shell脚本,-b 指定克隆的分支,-pm 指定包管理器。

脚手架成功创建项目,并打开浏览器运行项目。

四、参考文献

实现一个自定义前端脚手架_前端自定义脚手架-CSDN博客

【前端脚手架】实现一个自己的脚手架

【手把手教你实现前端脚手架】

【解决 SyntaxError: Cannot use import statement outside a module 报错问题】-CSDN博客

This syntax requires an imported helper but module ‘tslib‘ cannot be found-CSDN博客

相关文章:

重构Action-cli前端脚手架

一、概述 最近一年&#xff0c;为了满足公司业务开发&#xff0c;解决重复搭建项目繁琐过程&#xff0c;自己开发了一个前端脚手架&#xff0c;并发布到npm。随着时间的推移&#xff0c;发现之前的版本存在很多问题&#xff0c;有些功能做不到位&#xff0c;而且代码也不是很规…...

华为USG5500防火墙配置NAT

实验要求&#xff1a; 1.按照拓扑图部署网络环境&#xff0c;使用USG5500防火墙&#xff0c;将防火墙接口加入相应的区域&#xff0c;添加区域访问规则使内网trust区域可以访问DMZ区域的web服务器和untrust区域的web服务器。 2.在防火墙上配置easy-ip&#xff0c;使trust区域…...

【大数据学习 | HBASE高级】hive操作hbase

一般在查询hbase的数据的时候我们可以直接使用hbase的命令行或者是api进行查询就行了&#xff0c;但是在日常的计算过程中我们一般都不是为了查询&#xff0c;都是在查询的基础上进行二次计算&#xff0c;所以使用hbase的命令是没有办法进行数据计算的&#xff0c;并且对于hbas…...

集群聊天服务器(9)一对一聊天功能

目录 一对一聊天离线消息服务器异常处理 一对一聊天 先新添一个消息码 在业务层增加该业务 没有绑定事件处理器的话消息会派发不出去 聊天其实是服务器做一个中转 现在同时登录两个账号 收到了聊天信息 再回复一下 离线消息 声明中提供接口和方法 张三对离线的李…...

《FreeRTOS列表和列表项篇》

FreeRTOS列表和列表项 1. 什么是列表和列表项&#xff1f;1.1 列表list1.2 列表项list item 2. 列表和列表项的初始化2.1 列表的初始化2.2 列表项的初始化 3. 列表项的插入4. 列表项末尾插入5. 列表项的删除6. 列表的遍历 列表和列表项是FreeRTOS的一个数据结构&#xff0c;是F…...

C++:哈希拓展-位图

目录 一.问题导入 二.什么是位图? 2.1如何确定目标数在哪个比特位? 2.2如何存放高低位 2.3位图模拟代码实现 2.3.1如何标记一个数 2.3.2如何重置标记 2.3.3如何检查一个数是否被标记 整体代码实现 标准库的Bitset 库中的bitset的缺陷 简单应用 一.问题导入 这道…...

【数据结构与算法】查找

文章目录 一.查找二.线性结构的查找2.1顺序查找2.2折半查找2.3分块查找 三.树型结构的查找3.1二叉排序树1.定义2.二叉排序树的常见操作3.性能分析 3.2平衡二叉树1.定义2.平衡二叉树的常见操作3.性能分析 3.3B树1.定义2.B树的相关操作 3.4B树1.定义2.B树与B树的比较 四.散列表1.…...

从零开始学习 sg200x 多核开发之 milkv-duo256 编译运行 sophpi

sophpi 是 算能官方针对 sg200x 系列的 SDK 仓库 https://github.com/sophgo/sophpi &#xff0c;支持 cv180x、cv81x、sg200x 系列的芯片。 SG2002 简介 SG2002 是面向边缘智能监控 IP 摄像机、智能猫眼门锁、可视门铃、居家智能等多项产品领域而推出的高性能、低功耗芯片&a…...

LLM - 使用 LLaMA-Factory 微调大模型 Qwen2-VL SFT(LoRA) 图像数据集 教程 (2)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/143725947 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 LLaMA-…...

基于STM32设计的大棚育苗管理系统(4G+华为云IOT)_265

文章目录 一、前言1.1 项目介绍【1】项目开发背景【2】设计实现的功能【3】项目硬件模块组成【4】设计意义【5】国内外研究现状【6】摘要1.2 设计思路1.3 系统功能总结1.4 开发工具的选择【1】设备端开发【2】上位机开发1.5 参考文献1.6 系统框架图1.7 系统原理图1.8 实物图1.9…...

深入浅出《钉钉AI》产品体验报告

1. 引言 随着人工智能技术的迅猛发展&#xff0c;企业协同办公领域迎来了新的变革。钉钉作为阿里巴巴集团旗下的企业级通讯与协同办公平台&#xff0c;推出了钉钉AI助理&#xff0c;旨在提高工作效率&#xff0c;优化用户体验。本报告将对钉钉AI助理进行全面的产品体验分析&am…...

2020年计挑赛往届真题(C++)

因为17号要开赛了&#xff0c;甚至是用云端编辑器&#xff0c;debuff拉满&#xff0c;只能临时抱佛脚了 各个选择题的选择项我就不标出来了&#xff0c;默认ABCD排&#xff0c;手打太麻烦了 目录 单选题&#xff1a; 1.阅读以下语句:double m0;for(int i3;i>0;i--)m1/i;…...

ES6进阶知识二

一、promise方法的案例 Promise对象通过new Promise()语法创建&#xff0c;它接受一个函数作为参数&#xff0c;该函数接受两个参数&#xff1a;resolve和reject。resolve表示异步操作成功&#xff0c;reject表示异步操作失败。 案例&#xff1a;异步加载图片 const loadIma…...

大语言模型通用能力排行榜(2024年10月8日更新)

数据来源SuperCLUE 榜单数据为通用能力排行榜 排名 模型名称 机构 总分 理科 文科 Hard 使用方式 发布日期 - o1-preview OpenAI 75.85 86.07 76.6 64.89 API 2024年11月8日 - Claude 3.5 Sonnet&#xff08;20241022&#xff09; Anthropic 70.88 82.4…...

第六节、Docker 方式部署指南 github 上项目 mkdocs-material

一、简介 MkDocs 可以同时编译多个 markdown 文件,形成书籍一样的文件。有多种主题供你选择,很适合项目使用。 MkDocs 是快速,简单和华丽的静态网站生成器,可以构建项目文档。文档源文件在 Markdown 编写,使用单个 YAML 配置文件配置。 MkDocs—markdown项目文档工具,…...

【MySQL】MySQL中的函数之JSON_REPLACE

在 MySQL 中&#xff0c;JSON_REPLACE() 函数用于在 JSON 文档中替换现有的值。如果指定的路径不存在&#xff0c;则 JSON_REPLACE() 不会修改 JSON 文档。如果需要添加新的键值对&#xff0c;可以使用 JSON_SET() 函数。 基本语法 JSON_REPLACE(json_doc, path, val[, path,…...

【大数据学习 | HBASE高级】hbase的API操作

首先引入hbase的依赖 <dependencies><dependency><groupId>org.apache.hbase</groupId><artifactId>hbase-server</artifactId><version>2.4.13</version></dependency><dependency><groupId>org.slf4j<…...

C++(Qt)软件调试---内存泄漏分析工具MTuner (25)

C(Qt)软件调试—内存泄漏分析工具MTuner &#xff08;25&#xff09; 文章目录 C(Qt)软件调试---内存泄漏分析工具MTuner &#xff08;25&#xff09;[toc]1、概述&#x1f41c;2、下载MTuner&#x1fab2;3、使用MTuner分析qt程序内存泄漏&#x1f9a7;4、相关地址&#x1f41…...

python核心语法

目录 核⼼语法第⼀节 变量0.变量名规则1.下⾯这些都是不合法的变量名2.关键字3.变量赋值4.变量的销毁 第⼆节 数据类型0.数值1.字符串2.布尔值(boolean, bool)3.空值 None 核⼼语法 第⼀节 变量 变量的定义变量就是可变的量&#xff0c;对于⼀些有可能会经常变化的数据&#…...

MATLAB用CNN-LSTM神经网络的语音情感分类深度学习研究

全文链接&#xff1a;https://tecdat.cn/?p38258 在语音处理领域&#xff0c;对语音情感的分类是一个重要的研究方向。本文将介绍如何通过结合二维卷积神经网络&#xff08;2 - D CNN&#xff09;和长短期记忆网络&#xff08;LSTM&#xff09;构建一个用于语音分类任务的网络…...

智能网页内容截图工具:AI助力内容提取与可视化

我们每天都会接触到大量的网页内容。然而&#xff0c;如何从这些内容中快速提取关键信息&#xff0c;并有效地进行整理和分享&#xff0c;一直是困扰我们的问题。本文将介绍一款我近期完成的基于AI技术的智能网页内容截图工具&#xff0c;它能够自动分析网页内容&#xff0c;截…...

Axure设计之文本编辑器制作教程

文本编辑器是一个功能强大的工具&#xff0c;允许用户在图形界面中创建和编辑文本的格式和布局&#xff0c;如字体样式、大小、颜色、对齐方式等&#xff0c;在Web端实际项目中&#xff0c;文本编辑器的使用非常频繁。以下是在Axure中模拟web端富文本编辑器&#xff0c;来制作文…...

【MyBatis源码】深入分析TypeHandler原理和源码

&#x1f3ae; 作者主页&#xff1a;点击 &#x1f381; 完整专栏和代码&#xff1a;点击 &#x1f3e1; 博客主页&#xff1a;点击 文章目录 原始 JDBC 存在的问题自定义 TypeHandler 实现TypeHandler详解BaseTypeHandler类TypeReference类型参考器43个类型处理器类型注册表&a…...

号卡分销系统,号卡系统,物联网卡系统源码安装教程

号卡分销系统&#xff0c;号卡系统&#xff0c;物联网卡系统&#xff0c;&#xff0c;实现的高性能(PHP协程、PHP微服务)、高灵活性、前后端分离(后台)&#xff0c;PHP 持久化框架&#xff0c;助力管理系统敏捷开发&#xff0c;长期持续更新中。 主要特性 基于Auth验证的权限…...

常用命令之LinuxOracleHivePython

1. 用户改密 passwd app_adm chage -l app_adm passwd -x 90 app_adm -> 执行操作后&#xff0c;app_adm用户的密码时间改为90天有效期--查看该euser用户过期信息使用chage命令 --chage的参数包括 ---m 密码可更改的最小天数。为零时代表任何时候都可以更改密码。 ---M 密码…...

从dos上传shell脚本文件到Linux、麒麟执行报错“/bin/bash^M:解释器错误:没有那个文件或目录”

[rootkylin tmp]#./online_update_wars-1.3.0.sh ba51:./online_update_wars-1.3.0.sh:/bin/bash^M:解释器错误:没有那个文件或目录 使用scp命令上传文件到麒麟系统&#xff0c;执行shell脚本时报错 “/bin/bash^M:解释器错误:没有那个文件或目录” 解决方法&#xff1a; 执行…...

使用 Go 实现将任何网页转化为 PDF

在许多应用场景中&#xff0c;可能需要将网页内容转化为 PDF 格式&#xff0c;比如保存网页内容、生成报告、或者创建网站截图。使用 Go 编程语言&#xff0c;结合一些现有的库&#xff0c;可以非常方便地实现这一功能。本文将带你一步一步地介绍如何使用 Go 语言将任何网页转换…...

文件操作和IO

目录 一. 文件预备知识 1. 硬盘 2. 文件 (1) 概念 (2) 文件路径 (3) 文件类型 二. 文件操作 1. 文件系统操作 [1] File常见的构造方法 [2] File的常用方法 [3] 查看某目录下所有的目录和文件 2. 文件内容操作 (1) 打开文件 (2) 关闭文件 (3) 读文件 (4) 写文件 …...

【C++滑动窗口】1248. 统计「优美子数组」|1623

本文涉及的基础知识点 C算法&#xff1a;滑动窗口及双指针总结 LeetCode1248. 统计「优美子数组」 给你一个整数数组 nums 和一个整数 k。如果某个连续子数组中恰好有 k 个奇数数字&#xff0c;我们就认为这个子数组是「优美子数组」。 请返回这个数组中 「优美子数组」 的数…...

C语言导航 4.1语法基础

第四章 顺序结构程序设计 第一节 语法基础 语句概念 语句详解 程序详解 4.1.1语句概念 说明&#xff1a;构成高级语言源程序的基本单位。 特征&#xff1a;在C语言中语句以分号作为结束标志。 分类&#xff1a; &#xff08;1&#xff09;简单语句&#xff1a;空语句、…...