pui-pack
现在的前端开发因为node的加入,开发模式发生巨大的变化。以前所见即所得,现在大部分的需要编译合并压缩混淆,如何让代码变得可维护,可高效的协同开发?
pui-pack是基于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 pui-pack
mac安装
sudo npm install -g pui-pack
初始化
1:初始化目录和配置文件
npm init
创建的目录结构如下
2:下载项目需要的包依赖
├── npmBuild ---------------npm上传包
├── package.json ------------package.json
│── mock --------------------mock
│── dist --------------------本地开发压缩文件
│── node_modules -------------node_modules
├── src ----------------------本地开发环境文件夹
│ ├── components ----------组件文件夹
│ │ ├── index.js --------组件入口js
│ │ └── pui-slider -------单个组件
│ │ ├── README.md --- README
│ │ ├── index.js ----单个组件入口js
│ │ └── style -------组件样式
│ │ ├── index.js
│ │ └── index.scss
│ ├
│ ├── images -------------项目图片
│ ├── index.html ----------项目vm
│ ├── pack-index.js -------项目入口文件
│ ├── sass ----------------仰慕样式
│ │ ├── _init.scss
│ │ ├── _mixin.scss
│ │ └── index.scss
│ └── utils --------------项目依赖的外部组件
│ └── online.js
│── cybmock.config.js ----mock
│── README.md --------------README
│── .gitignore -------------git忽略
│── .npmignore -------------npm忽略
└── webpack.config.js ------webpack配置
3.开启服务
npm run server
4.本地开发打包
npm run dev
5.打包npm包
npm run build
组件开发规范
1.组件存放目录
存放位于当前项目->src->components
2.组件结构
.
├── index.js
└── pui-slider
├── README.md
├── index.js
└── style
├── index.js
└── index.scss