6.0.0 • Published 4 years ago

pui-pack-1 v6.0.0

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

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

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