Mrlyjoutlook / fis3-react

Construction of react application based on fis3

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React,FIS3

Construction of react application based on fis3.

why not use webpack?

相对整个前端项目工程化问题,单单靠webpack还是不够,FIS3和webpack在定位上不一样的,FIS3是相对于整个前端项目工程化的构建,webpack则是对于SPA和模块管理打包,算是工程化的一部分。FIS3解决webpack一些无法满足的地方,同样的,没有webpack一些吸引人和好用的地方,以上纯属于个人观点。webpack和gulp都用过,一直在寻找对于不同应用的项目适合自己解决方案。这个项目算是author(本人)对FIS3的上手和对前端工程化探索。

Npm Script

  • 打包 npm run dist
  • 本地开发测试 npm start(ctr+c 只会停止文件监听,并不会停止本地服务器)
  • 代码风格检测 npm run lint
  • 清除打包目录 npm run clean
  • 停止本地开发测试服务器 npm stop

Features

  • support es6,jsx
  • support redux,react-router
  • support less

Directory Structure

fis3-react/
├── dist/  //执行npm run dist打包后文件目录  
├── mock/  //mock模拟数据
├── src/
│     ├── action/  //建议相关的types和action为一个文件
│     ├── components/
│     ├── config/  // 自行发挥
│     ├── reducers/  //redux reducers
│     ├── routes/  //按路由结构划分组件及目录
│     ├── store/  //redux store
│     ├── util/  //自行发挥
│     └── routes.js
├──static/
│     ├──lib/  //类库,如jq,loadsh
│     ├── styles/  //样式
│     └── images/  //	图片

FIS3

解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题

FIS3 构建工作原理

FIS3 是基于文件对象进行构建的,每个进入 FIS3 的文件都会实例化成一个 File 对象,整个构建过程都对这个对象进行操作完成构建任务。 分为构建流程和编译流程。官方文档


FIS3 运行原理


FIS3 构建流程(打包过程)

  • prepackager(打包前处理)
  • packager(标准打包阶段)
  • spriter(图片合并等)
  • postpackager(打包后处理)

FIS3 编译流程(单文件编译)

  • lint(代码审查)
  • parser(编译)
  • preprocessor(fis内置标准前处理)
  • standard(fis内置标准处理)
  • postprocessor(fis内置语法标准处理后)
  • optimizer(代码优化)

FIS3 插件(注意和灵活使用的插件)

fis3-packager-deps-pack

  • 原来的 packTo 将被忽视,在此插件配置项中设置。
  • 每个规则都会按顺序将命中的文件加入到列表或者从列表中移除,顺序不同会带来不一样的结果。
  • :deps 用来命中目标文件的依赖文件,不包含自己。
  • :asyncs 用来命中目标文件的异步依赖,不包含自己。
  • !xxx 叹号打头的规则,会把命中的文件,从现有的列表中去除。

mock 假数据模拟

server.conf 配置文件 官方文档

指令名称 正则规则 目标文件
  • 指令名称 支持 rewrite 、 redirect 和 proxy。
  • 正则规则 用来命中需要作假的请求路径。
  • 目标文件 设置转发的目标地址,需要配置一个可请求的 url 地址。

eg:http://127.0.0.1:8080/api/user

FIS3构建React工程 遗留问题

  • 按需加载,使用amd requirejs本地开发可以实现按需加载,打包时候在于fis.match('::package', {packager:[fis.plugin('deps-pack',{})})的配置问题。如果自己写的话,小项目可以应付的来,大项目的话这个地方相当麻烦。如何实现自动化,正在解决...
  • 前端路由跳转后刷新,找不到对应路由。问题点应该在于SPA的路由和本地服务器端路由不是同一层,可能需要SPA->SSR才行,或者换本地服务器?。但项目定位为SPA的构建项目。正在解决...

如果有哪位同学发现或者已经解决可以一起探讨下。lssues

rep正在继续完善途中...

About

Construction of react application based on fis3


Languages

Language:JavaScript 96.1%Language:HTML 2.8%Language:CSS 1.2%