快速建立H5專案腳手架工具
ofollow,noindex" target="_blank">X-BUILD 一套基於 Webpack (v4.21.0)快速搭建H5場景開發環境的腳手架,只需要幾分鐘的時間就可以執行起來。
H5場景開發
X-BUILD 是針對 H5 開發的一套自動化構建工具,致力於提升開發效率,減小開發難度。它可以讓你在沒有任何構建工具(例如 grunt 、 gulp 或 webpack 等工具)配置經驗的情況下,幫你快速生成一個完整的前端工程,並可以打包程式碼和靜態資源,使你的專案以最優異的效能上線。
如果你被這些問題困擾,請嘗試X-BUILD幫你解決:
-
如何快速的搭建自己前端 H5 專案(類似@vue/cli 的方式)?
-
如何一套程式碼實現移動端自適應?
-
JavaScript使用不是很熟練,又想去做翻頁效果怎麼辦?
-
如何打包出效能優秀、兼用型高的程式碼?
-
想使用 CSS 前處理器或 ES6 語法,又對前端工程不太瞭解,如何搭建自動化的開發環境?
-
如何自動重新整理(熱載入)瀏覽器?如何在自己的手機中測試?
功能特性
Speciality | Description |
---|---|
devServer | 模組熱替換(HMR - Hot Module Replacement) 可以顯著加快開發速度。 |
自適應解決方案 | px2rem (loader) + hotcss 實現多終端顯示一致。 |
HTML | 使用 Pug 模板引擎,風格與Stylus類似。 |
Css | 支援sass、less、stylus樣式前處理器,normalize重置樣式,打包拆分單獨的css檔案。 |
JavaScript | Webpack 解決模組化,通過Babel編譯成現代瀏覽器可執行的JavaScript。 |
程式碼規範 | 使用 ESLint 避免低階錯誤和統一程式碼的風格。 |
靜態資源服務 | 提供程式碼壓縮、圖片壓縮、檔案hash、base64處理等服務。 |
生態系統
Project | Status | Description |
---|---|---|
X-BUILD | 基於Webpack的工程模板,CLI create時會被下載。 | |
X-BUILD-CLI | 腳手架工具,快速生成工程目錄,並安裝依賴。 | |
X-FULLPAGE | 適用於移動端的整屏滾動外掛,支援動畫觸發。 | |
X-LOAD | 建立Loading效果、控制圖片載入方式。 | |
X-ANIMATE | 螢幕滾動執行相應動畫,支援動畫組和生命週期回撥。 | |
X-TOUCH | 使原生DOM支援輕觸、長按和滑動事件。 |
討論交流
QQ群
歡迎加入 X-BUILD QQ交流群,在這裡可以互相交流前端問題。
群號: 374406559
提問 & BUG
請將BUG提交在不同專案的 github issues 裡,或者加QQ:461229187討論交流。
X-BUILD模板 | CLI工具 | X-FULLPAGE | X-LOAD | X-ANIMATE | X-TOUCH