使用vite、tsup、github actions打造丝滑的npm package开发模版
很多时候我们有开发npm pacckge的想法，但自己搭建开发模版会觉得很麻烦！所以，我有了搭建零配置npm package开发模版的想法，真的是零配置哦🎉，你要做的只是：
- Fork [my project]
- 初始化GitHub action必须的token
- 在src文件夹中编写您的逻辑
- Push or PR，Github action会自动发包，并部署storybook文档
项目地址：
大致介绍
npm package开发模版所包含的技术点：
-
🛹 项目使用vite3.0搭建, 支持typescript
-
🧩 发布的npm package支持cjs/esm
-
🎯 使用github actions实现自动化 ci、deploy to netlify、npm publish、create-release
-
🛫 使用tsup(npm run build)去构建npm package
同时也集成了vite构建方案 -->
npm run build:vite输出路径: dist/index.js & dist/esm/index.js & dist/index.d.ts
-
🏗 内置了开发调试环境(可直接引用src中的代码，方便调试)
对应文件夹为playground --->
npm run dev -
💡 支持browserslistrc配置
-
🔌 使用postcss (postcss-nested/ autoprefixer / cssnano)构建样式
对应文件夹为playground --->
npm run build:css入口文件位置： src/styles/index.css
输出路径: dist/index.css
-
🖼 集成stylelint
-
💊 集成eslint
-
🎉 集成单元测试（vitest）
-
🧌 集成storybook
-
🐳 集成Husky & lint-staged
-
🍥 集成commitlint, 规范提交信息
-
🪜 vue版本默认集成了vitepress
docs文件夹
项目结构
Project
├── __tests__ # 单元测试脚本
├── babel.config.js # babel config
├── package.json
├── playground # dev environment folder (通过包名可以直接引用src中的源码，方便开发调试)
│ ├── index.html
│ ├── package.json
│ ├── public
│ ├── src
│ ├── tsconfig.json
│ ├── vite-env.d.ts
│ └── vite.config.ts
├── postcss.config.js # 使用postcss构建css
├── src # npm包源码位置
│ ├── index.ts # npm包源码入口文件
│ ├── stories # storybook for building UI components and pages
│ ├── styles # npm包对应的样式源文件（可选）
│ └── types.ts # ts类型申明
├── tsconfig.json # ts config
└── tsup.config.ts # 默认使用tsup构建package（也可选择npm run build:vite）
如何使用
替换包名称
全局搜索项目，将'custom-package-name'替换为你的npm package名称
初始化github action需要的token
具体步骤，请参照： create token
关于github actions
正常push或pr即可触发action
当有PR被创建、修改、reopen、commit时，会触发ci work，用于执行eslint、stylelint、typecheck、unit test
效果如下图：
当有代码被push 或 PR被创建、修改、reopen、commit时，会触发deploy work，用于执行上一步ci，并在ci成功时自动deploy storybook到netlify、vercel上
效果如下图：
当tag被添加（npm run release），会触发release work，用于执行上一步ci，并在ci成功时自动发布npm package、create release
效果如下图：
