沉醉於Web開發，我認爲是一件富有詩意和美好的事情。我們可以用各種優秀的前端技術、UI組件和無限的可能性來點綴我們的想法。天馬行空，總有我想做，我能做，我不能做的。 在這些過程中，很容易忘記我們爲什麼堅持這樣做，以及一個不錯的漂亮的的網站究竟是什麼？先來看一下我將在這篇文章中提到的React建站工具包PoemKit的截圖：
今天有無數的React UI工具包和庫。那面對這麼多選擇，面對新的項目挑戰，我下一步應該做什麼？是學習新框架，還是自己造輪子，還是去挖掘一些工具，總之，我需要一個思考，以便更好地面對未來更多的技術需求和革新。框架畢竟只是框架，拋開場景談用途都不對，我應該思考如何從個人成長和項目需求，語言基本功的訓練等方面來規劃未來，規劃這個開源工具的工作。這就是爲什麼在一年中這個繁忙的時間裏，我仍然抽時間學習一些前端或後端的技術，它們如此重要。不過，首先我會考慮某些框架是否適合去採用。另外我特別關注2021年至2022年新冠病毒的大流行對工作對行業發展的各種影響。
先說說我的想法吧。
爲了適應一些大型的網站平臺和軟件項目，我考慮了一些React框架，比如Nextjs，但是最終我決定暫時放棄它(只是暫時性的，對於未來的某些項目也可能直接採用)，我想讓網站的架構能夠自由的操控，比如webpack腳手架的功能性，擴展性。一方面從零開始搭建webpack腳手架，也能夠讓我深入學習各方面的知識，讓我係統的瞭解React網站的架構原理和實現方法，同時將它沉澱爲開源的工具箱，能夠在未來給我的項目提供必要的支持和參考。
如果進行數據傳輸，那麼我將優先使用Redux來做跨組件狀態管理器，未來根據項目需要也會使用一些便攜的工具包。我將所有的UI組件都使用TypeScript來編寫，一方面組件庫系統化利於管理，一方面它們和整個React網站的邏輯區塊不會衝突。它還要能夠直接導入其它UI組件庫，比如Ant Design. 於此同時，該工具箱需要內置自定義React組件，以方便集成並改善開發人員體驗。
對於製作一個前後端完全分離的網站，我還需要考慮響應式和一些酷炫的交互效果，複雜的動畫我使用了GSAP插件，並且讓整個網站兼容Bootstrap和常見的圖標庫，以提供更加友好的樣式支持。它和本身內置的樣式和腳本不衝突，這是我對於項目交互複雜化的考慮。
最後需要考慮SEO的問題，我也會進一步解決。比如讓整個React網站支持自定義的meta標籤和title等，至於性能，組件之間的通信和掛載、卸載，都嚴格參考相關的官方文檔，做了腳本優化的處理。
當然，對於一個學習人，我的代碼和腳本並不是非常高端和優秀，但是整個開源產品讓我的思維和整體技術得到了非常多的學習和提升，也讓我對未來的新項目多了很多選擇。我希望它能給大家帶來一些用途，也非常感謝大家耐心閱讀我的文字。
接着，我還需要爲他取一個不錯的名字，因爲我喜歡WordPress，WordPress有一句諺語：Code is Poetry. 說的就是代碼如同詩歌一般美妙。做這個工具包，我也是爲了做出更加如詩美妙的網站而努力，所以PoemKit就算這麼來的。
好了，我已經把整個項目開源，接下去我繼續詳細介紹整個PoemKit工具包：
1. 這個項目的開發背景
不論做什麼樣的開發工作，可能面臨複雜的DevOps流程和思維的巨大挑戰，PoemKit就是爲了提升個人成長，提高開發效率質量而形成的。PoemKit系一套免費的網站開發工具包，幫助開發者從零建立一個支持服務端渲染(SSR)的React技術網站，它支持pm2自動部署到服務器。PoemKit提供了50多個內置UI組件，用於構建現代Web應用程序。
2. 聊聊整個項目的架構
簡而言之，一個複雜的React項目應該是這樣構建的。雖然我沒有在生產中使用Next框架，但這個文件結構在任何React 設置中都應該非常有用。
3. 總結一下項目特點
它爲您創建了一個環境，讓您專注於業務邏輯，並簡化應用程序的UI外觀的開發工作。接下去詳細描述一下它的特點。
- 基礎環境: TypeScript 4.x.x + Babel 7.x.x + Webpack 5.x.x
- 提供結構化佈局對象、UI控件等多種預置UI組件
- 可訪問的URL、SEO優化，以及使用React Helmet使您的站點對搜索引擎友好
- 集開發、調試、打包和部署爲一體
- 它不是一個JavaScript框架
- 沒有jQuery且不綁定任何工具庫
- 支持服務器端渲染（SSR）
- 組件分離，可以導入任何第三方UI組件到項目 (比如Ant Design)
- 使用Sass/SCSS來設置React組件的樣式
- 自動捆綁並生成獨立的核心CSS和JS文件
- 支持通過pm2自動部署到服務器
- ✂️ 插件擴展: 默認組件演示導入了諸如Bootstrap4柵格系統, GSAP動畫庫, FontAwesome圖標庫, 3D引擎等常用的第三方插件，以便能夠快速擴展您的網站 (可以按需配置需要導入的庫或者插件)
- ✂️ 可配置腳手架: 獨立打包dist文件（您可以自主修改webpack.config.js使用內存掛載）
PoemKit可以直接通過命令工作和部署到雲服務器, 但仍然需要在其背後編寫真正的代碼，這些工具包作爲UI組件和邏輯模塊，可以組合成一個真正的應用程序原型。它仍然需要編程功能才能使它們在實際需求中工作。如果您想獲得靈感或只是直接預覽效果，您可以使用我們預先構建的示例頁面快速開始您的開發。我們可以看看它的默認預覽截圖：
4. 如何使用
工具箱提供了一系列的配置和新手指導，您可以從Github中獲取項目並查看文檔。除此之外，包中的UI組件和模塊可以單獨使用、設置樣式並與現有的應用程序部分組合。
5. 更進一步
想要在您的項目中更進一步？這個開源項目可以給您提供一定的幫助和參考。
項目資源（碼雲）：https://gitee.com/xizon/poemkit
演示頁面：https://uiux.cc/poemkit (建議使用梯子)
這些是我的想法。如果您想討論某些內容或對如何改進有更多意見，請隨時告訴我！感謝！