更新简单类库脚手架配置

juejin.cn/post/684490... 以前做的脚手架配置,前几年对其进行了一次升级

  1. typescript support
  2. pnpm package manager
  3. build tools
  4. prettier / eslint setting
  5. test supports
  6. github action supports

起言

4 年前还是 js 的工作环境,4 年后几乎已经全 typescript 的工作环境了,随着而来的是脚手架的升级,两年前进行了一波升级,现在将经验分享。 利用预置的库 template 设置方便我们快速的构建插件能力

typescript support

ts 的支持现在可以说很普遍,类型标注也确实现在是包功能的基本需求。 我基本使用的 tsconfig 设置与初始化基本无异,核心记得开启 strict 即可。

pnpm package manager

包管理工具基本上也是个人的喜爱,pnpm 轻量且快速。 如果限制环境的话,记得将 package.json 的 packageManager 进行限制。

build tools

比起 4 年前,可以说这几年工具的发展都是往简便走的,巴不得你直接什么都不用配置,直接运行,像 unbuild / tsup / bunchee 甚至 vite lib mode 都是用来开发包很好的构建方式。 我这里是选择 tsup, 其底层实际上也是 rollup 只是帮助我们免去了大量的 rollup 配置。

prettier / eslint settings

现在流行自己构建自己的 setting,参考类似 github.com/antfu/eslin... 有兴趣的朋友可以自己构建一个。我这边一般用 alloy-team eslint 或者 antfu 的。

test support

从早年的 mocha 到 jest 到 ava 再到现在 vitest。 现在我基本包基本使用 vitest(esm支持度, vite 无缝),e2e 基本是使用 cypress。

github action

以前的时候 github action 还没那么流行,但是现在已经是标配了 我一般几个阶段使用

  1. push trigger test
  2. release

push 触发 action test, 监听 push 时机

yaml 复制代码
on:
	push:	
		branches: [main]
	pull_request:
		branches: [main]

发版本 release 一般的流程是 bumpp(antfu的工具,帮助我们进行打 tag 流程)

shell 复制代码
git push -u origin main

bumpp

pnpm run build

pnpm release

我们在 package.json script prepublishOnly 中进行 pnpm run build 处理即可。

我们将以上的步骤放置到 release.yml 中 github.com/ZWkang/ts-l...

感谢

欢迎联系我

相关推荐
ZC跨境爬虫2 分钟前
跟着 MDN 学 HTML day_29:(动态构建与更新 DOM 树)
前端·javascript·ui·html·html5·媒体
编程技术手记7 分钟前
html table布局平衡
前端·html
huoyueyi17 分钟前
3D数字孪生项目 LCP 优化指南
前端·3d·几何学
菜鸟小芯44 分钟前
【腾讯位置服务开发者征文大赛】校园美食雷达 —— 基于 CodeBuddy + 腾讯 LBS 开发实战
前端·美食
搜狐技术产品小编20231 小时前
深度解析与业务实战:将 screenshot-to-code 改造为支持 React + Ant Design 的前端利器
前端·javascript·react.js·前端框架·ecmascript
Rik1 小时前
Cursor Rules 深度玩法:从全局配置到项目级规则,让 AI 真正理解你的项目
前端·后端
weixin_471383031 小时前
set和map结构,减少O(n)复杂度
前端·javascript
hunteritself1 小时前
GPT Image2 + Seedance 2.0:3 小时从剧本到 AI 互动影游,深度实测复盘
前端·数据库·人工智能·深度学习·transformer
独秀不如众秀1 小时前
前端页面引擎协议:由浅入深——从 30 行到 vform3 的演化之路
前端
学网安的肆伍1 小时前
【044-WEB攻防篇】PHP应用&SQL盲注&布尔回显&延时判断&报错处理&增删改查方式
前端·sql·php