⑴ Vite入门教程-下一代前端开发与构建工具
直接点说，现市面上的构建工具太慢了（webpack 、 Rollup 和、 Parcel等），Vite直接利用浏览器原生的 ES模块使构建速度更快
使用 NPM:
使用 Yarn:
然后按照提示操作即可！
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:
在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：
可以指定额外的命令行选项，如 --port 或 --https。运行 npx vite --help 获得完整的命令行选项列表。
当以命令行方式运行 vite 时，Vite 会自动解析 项目根目录 下名为 vite.config.js 的文件。
最基础的配置文件是这样的：
注意：即使项目没有在 package.json 中开启 type: "mole"，Vite 也支持在配置文件中使用 ESM 语法。这种情况下，配置文件会在被加载前自动进行预处理。
你可以显式地通过 --config 命令行选项指定一个配置文件（相对于 cwd 路径进行解析）
因为 Vite 本身附带 Typescript 类型，所以你可以通过 IDE 和 jsdoc 的配合来实现智能提示：
另外你可以使用 defineConfig 工具函数，这样不用 jsdoc 注解也可以获取类型提示：
Vite 也直接支持 TS 配置文件。你可以在 vite.config.ts 中使用 defineConfig 工具函数。
如果配置文件需要基于（dev/serve 或 build）命令或者不同的 模式 来决定选项，则可以选择导出这样一个函数：
需要注意的是，在 Vite 的 API 中，在开发环境下 command 的值为 serve（在 CLI 中， vite dev 和 vite serve 是 vite 的别名），而在生产环境下为 build（vite build）。
如果配置需要调用一个异步函数，也可以转而导出一个异步函数：
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
⑵ 利用father build 开发前端组件库实战
我们的目标是建立一个前端组建库, 使用的技术栈是father+docz，同时要支持typescript, 在build出来的es目录中要能够生成“.d.ts”后缀的类型声明文件，因为只有生成类型声明文件，我们在使用自己开发的组件库的时候才能获得更好的开发体验。
之所以写下这篇文章，是因为自己在使用father-build建设内部组件库的过程中，遇到了一些问题且难以找到相关文档，将自己的经验总结下来希望看到这篇文章的人能避开这些坑，更加顺利地搭建好自己的前端组件库。
package.json
其中，main指定了入口文件，mole对应es mole的输出，types对应你的typings文件，这样在组件在被使用的时候编辑器才能识别出你的组件类型声明
.fatherrc.js 配置father build打包方式, 具体详情可以参考 umijs/father
tsconfig.json typescript的配置文件，注意只有declaration设置为true才能生成.d.ts后缀的文件
接下来我们在components目录创建第一个自己的组件，下面是一个button的例子:
样式文件可以直接使用less编写
然后在入口文件index.ts将其导出，暴漏给外部使用。
使用文档的后缀名为".mdx", 语法与markdown类似，更多详情参考 docz 的文档
我们可以执行 yarn start ，来实时查看文档的效果。
现在命令行执行 yarn build 即可对组件库进行打包了，注意我们在.fatherrc中配置了esm和cjs两种打包方式，对应会生成 es 和 lib两个目录，其中 esm对应的是 es目录，cjs对应lib目录。
正常情况下，在的es和lib目录下应该已经为我们写的ts源码自动生成了“.d.ts”后缀的类型声明文件，如果没有生成，请仔细对比.fatherrc.js和tsconfig.json这两个配置文件，另外还要注意的是，如果我们基于antd封装业务组件库的话，不要在组件库中使用css mole，否则也会造成无法自动产生类型声明文件的问题。
文章未能详尽部分，可以参考这个demo的github源码地址： https://github.com/xitengfei/xui-components , 有问题欢迎批评指正。