更新简单类库脚手架配置

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...

感谢

欢迎联系我

相关推荐
wuhen_n21 分钟前
JavaScript内存管理与执行上下文
前端·javascript
Hi_kenyon42 分钟前
理解vue中的ref
前端·javascript·vue.js
落霞的思绪2 小时前
配置React和React-dom为CDN引入
前端·react.js·前端框架
Hacker_Z&Q2 小时前
CSS 笔记2 (属性)
前端·css·笔记
Anastasiozzzz2 小时前
LeetCode Hot100 295. 数据流的中位数 MedianFinder
java·服务器·前端
Exquisite.3 小时前
Nginx
服务器·前端·nginx
打小就很皮...3 小时前
dnd-kit 实现表格拖拽排序
前端·react.js·表格拖拽·dnd-kit
Ulyanov3 小时前
从静态到沉浸:打造惊艳的Web技术发展历程3D时间轴
前端·javascript·html5·gui开发
打小就很皮...3 小时前
React 19 + Vite 6 + SWC 构建优化实践
前端·react.js·vite·swc
Highcharts.js3 小时前
使用Highcharts与React集成 官网文档使用说明
前端·react.js·前端框架·react·highcharts·官方文档