快速建立H5專案腳手架工具
摘要：
X-BUILD 一套基於 Webpack (v4.21.0)快速搭建H5場景開發環境的腳手架，只需要幾分鐘的時間就可以執行起來。
H5場景開發
X-BUILD 是針對 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