zoos v0.1.3

Zoos

功能

• 支持 js,jsx,css,scss,less 公共代码抽取，压缩打包
• 支持基本的图片文件 png|jpe?g|gif|svg 加载,转 base64 打包, 支持视频文件 mp4|webm|ogg|mp3|wav|flac|aac加载
• babel-loader + less/sass 模块加载功能，支持scss的 cssModules（不支持 less 的），主要使用 scss 文件写样式，less+less-loader 这里只用来编译 antd 的样式或者其他使用 less 的第三方库，
• webpack-dev-server 服务器，支持反代理配置，热加载热更新
• babel-polyfill 让 IE10+浏览器支持 es6+语法的垫片
• react-loadable 结合 babel-plugin-syntax-dynamic-import 支持 react 组件的按需加载
• 支持使用 scss 变量代替 less 变量自定义 antd 的主题
• 支持状态管理，使用 redux + react-redux

工程结构

.
├── /build/          # webpack配置
├── /config/         # config/index.js可以配置反代理路径和打包公共路径，dev端口号等等
├── /dist/           # 项目打包输出目录
├── /src/            # 项目开发源码目录
│ ├── /Api/          # 后台接口文件夹,
│ ├── /assets/       # 公共文件:图片，iconfont,
│ │ ├── /iconfont/   # 来自 http://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a
│ │ └── /images/     # 图片
│ ├── /components/   # 自生产的通用组件
│ │ ├── /AbgImage/   # 组件文件夹，对应组件名称： 以"A"开头 驼峰命名法。例如：ZbgImage
│ │ │ ├── index.jsx  # 组件主要文件（必需的）
│ │ │ └── style.scss # 组件样式文件（如果需要）
│ ├── /context/      # react “动态上下文” 文件
│ ├── /HOC/          # 高阶组件，用于封装多次共用逻辑代码
│ ├── /lazyLoad/
│ │ ├── lazyLoad.js  # 这样使用const componet=lazyLoad(()=>import('./componet.jsx'))实现异步组件
│ │ └── Loading.jsx  # //暂未用到
│ ├── /mock/         # 数据模拟（建议使用 mockjs）
│ ├── /scss/         # 通用样式文件夹
│ │ └── index.scss   #
│ ├── /store/        # 状态管理仓库，使用redux + react-redux
│ ├── /views/        # 路由组件目录，应当按照路由结构创建
│ ├── /zTool/        # 通用工具目录
│ │ └── httpAjax.js  # ajax库：axios或fetch 的封装
│ ├── ant-theme-vars.scss      # antd主题变量
│ ├── App.api.js     # 自动加载/Api/下`.api.js`后缀的文件
│ ├── App.context.js # 自动加载/context/下的'Context.js'
│ ├── App.jsx        # 根组件
│ ├── app.scss       # 根样式文件
│ └── main.js        # 项目入口文件
├── /static/         # 不会被压缩打包的静态文件放这里
│ ├── /pace/         # 页面的加载进度条
│ │ ├── pace-theme-flash.css   #
│ │ └── pace.min.js
│ └── vendor.dll.*.js  # package.json的dependencies依赖包的预打包文件，由npm run dll命令生成
├── babel.config.js  # babel配置
├── .gitgnore        # git忽略检测的配置
├── .postcssrc.js    # postcss配置
├── .prettierrc      # 格式化代码 prettier 的配置， vscode 编辑器需安装 prettier 插件
├── index.html       # 单页面唯一的html
└── package.json