更新简单类库脚手架配置

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

感谢

欢迎联系我

相关推荐
用户12039112947262 分钟前
从零掌握 React JSX:为什么它让前端开发像搭积木一样简单?
前端·react.js·面试
Jonathan Star2 分钟前
git commit --amend 是 Git 中用于修改最后一次提交的核心命令
前端·chrome·git
在掘金801106 分钟前
RequireJS 详解
前端·javascript
派大鑫wink25 分钟前
Python 流程控制实战:打造文字版数独小游戏(新手友好)
服务器·前端·microsoft
JIngJaneIL1 小时前
基于Java+ vueOA工程项目管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
测试人社区-小明1 小时前
从前端体验到后端架构:Airbnb全栈SDET面试深度解析
前端·网络·人工智能·面试·职场和发展·架构·自动化
李少兄1 小时前
前端开发中的 transform、translate 与 transition
前端·css
蓝鲸屿1 小时前
JS基础第九天——对象(2)+Random
开发语言·前端·javascript
全栈练习生1 小时前
ESModule的工作原理是什么
前端
疯狂的沙粒1 小时前
Vue 前端大屏做多端屏幕适配时,如何让其自动适配多种不同尺寸的屏幕?
前端·javascript·vue.js