X-BUILD 一套基于 Webpack (v4.21.0)快速搭建H5场景开发环境的脚手架，只需要几分钟的时间就可以运行起来。
H5场景开发
X-BUILD 是针对 H5 开发的一套自动化构建工具，致力于提升开发效率，减小开发难度。它可以让你在没有任何构建工具（例如 grunt 、 gulp 或 webpack 等工具）配置经验的情况下，帮你快速生成一个完整的前端工程，并可以打包代码和静态资源，使你的项目以最优异的性能上线。
:warning: 基础
有一定的 HTML 、 CSS 基础，了解 JavaScript 、 NPM 和 命令行 。
如果以上这些都掌握的话，那我们继续吧～！:v:
如果你被这些问题困扰，请尝试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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 不使用脚手架创建vue项目
- Beego 框架入门篇：通过 Beego 提供的脚手架工具 Bee 快速创建 Web 项目
- Next.js 脚手架进阶 —— 扩展为全栈脚手架
- 前后端分离脚手架
- 脚手架的开发总结
- Angular脚手架开发
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
