1.0.0 • Published 4 years ago

xhm-pack-test9 v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
4 years ago

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

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