xhm-pack

现在的前端开发因为node的加入，开发模式发生巨大的变化。以前所见即所得，现在大部分的需要编译合并压缩混淆，如何让代码变得可维护，可高效的协同开发？

xhm-build是基于webpack4面向前端自动化开发工具。主要解决多人开发，目录结构和代码的一致性可维护性，只需要你在config.js里面配置一下就可以选择自己的各种需求,适合安装一次不用多次安装通用型前端自动化脚手架。

主要有一下功能

• browser-snyc自动搭建本地开发环境，多端代码同步和刷新调试功能
• able代码编译功能。ES6转ES5的编译。
• react的编译功能(vue后续加入)
• sass的代码编译功能以后会集成less
• css,sass的REM的自动换算功能可以根据不同设计稿配置不一样的转换值。
• art-template模板编译功能
• webpack模块化组件化开发功能
• 移动端调试神器vConsole
• mock数据

环境安装

请去node官网安装依赖node的环境版本>=6.11.5，当然考虑到最佳的es6特性实现，建议node版本可以升级到V8.9.4或以上版本

安装

windows安装

npm install -g xhm-pack

mac安装

sudo npm install -g xhm-pack

初始化

1:初始化目录和配置文件

npm init

创建的目录结构如下
2：下载项目需要的包依赖

├── package.json ├── test │   ├── dist │   ├── src │   │   ├── cybmock.config.js │   │   ├── img │   │   │   └── c-z.jpg │   │   ├── index.html │   │   ├── js │   │   │   ├── components │   │   │   │   └── Header │   │   │   │   └── index.js │   │   │   ├── demo.art │   │   │   ├── entryDemo.js │   │   │   ├── entryIndexPack.js │   │   │   ├── home.js │   │   │   ├── packDash.js │   │   │   └── store │   │   │   ├── action │   │   │   │   └── index.js │   │   │   ├── index.js │   │   │   └── reducer │   │   │   └── index.js │   │   └── sass │   │   └── home.scss │   └── webpack-user-config.js └── webpack.config.js

3.开启服务

npm run server

4.打包

npm run dev

未完待续后续功能还在继续开发.........