⑴ 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 , 有問題歡迎批評指正。