winterfall v 2.0.0
—— Winter is coming
目录结构
-
app/:源代码根目录; -
Components/:功能性模块,无法通过url单独导航到;Button/:模块名字,可通过import方式导入到实际页面;
index.js:默认内容;styles.css:默认样式;
-
Modules/:页面大模块,包含几大业务模块;Index/:首页模块
-
Images/: 图片目录; -
Pages/: 页面子模块,可通过url单独导航到;IndexPage:index.js:默认内容;styles.css:默认样式;selectors.js:所有从store中获取内容的函数;
-
Store: 数据流页面,数据存储及流转等过程;action.js:所有的action函数(Redux);actionType.js:所有的actionType定义(Redux);reducer.js:所有store变动函数(Redux);sagas.js:所有saga函数,主要是和fetch进行配合;
-
Utils/:工具模块;-
request.js:异步请求工具; -
asyncInjectors:异步注入saga和reducer工具;
-
-
app.js:项目总入口; -
index.html:项目主页面模板; -
routes.js:项目所有路由,配置url; -
reducers.js:项目基础reducer以及所有其他reducer的集合; -
store.js:项目构建store,加入所有的依赖; -
docs/:存放开发过程中产生的开发文档; -
***.md:描述信息的markdown文件; -
server/:Node服务器配置信息,用于本地研发; -
.gitignore:屏蔽git版本控制路径; -
.eslintrc:ESLint配置文件; -
package.json:控制npm依赖包; -
README.md:项目基础描述信息; -
webpack.base.config.js:webpack基础配置信息; -
webpack.dev.config.js:webpack开发配置信息; -
webpack.prod.config.js:webpack产品配置信息;
安装指令
$ git clone <url>$ npm install国内可以选择使用cnpm--点击这里
项目启动
$ npm run start打开游览器,地址栏输入http://localhost:8080;
项目检测
$ npm run lint引入 eslint-->点击这里 代码规范检测机制。
检测内容详见 .eslintrc 的配置,具体涵盖如下几项:
- 箭头函数参数使用圆括号;
- 箭头函数体使用大括号;
- object 末尾加逗号;
- 使用一致的缩进(暂时除去了这项检测,无法配置成'tab',请自觉使用 tab 完成缩进);
- 禁止对 function 的参数进行重新赋值,参数的任何属性值变动不会报错;
- 禁用 console,出现 console 会出警告;
- 要求使用模板字面量而非字符串连接;
- 要求对象字面量的简写或非简写一致性;
- 其他详见: eslint-plugin-import、 eslint-plugin-jsx-a11y、 eslint-plugin-react、 eslint-plugin-redux-saga
Sublime ESlint 插件
- SublimeLinter
- SublimeLinter-contrib-eslint
License
项目更新日志
v2.0.0
- 为加强暂存数据的有效管理,引入大模块的概念,将原有Page的方式修改为以模块的形式 进行组织,具体方式参见目录结构Modules部分。
- Modules目录下包含Base、Load、Login、Index等模块,Base是基础框架模块,Load是资源 信息加载模块,Login是用户登录和退出模块,Index是首页模块。
- 在项目的webpack配置文件中添加了HtmlWebpackPlugin中favicon的配置项。
- 基于winterfall 2.0版本,针对项目中可能运用插件制作了Demo,主要包括以下几个方面:
- Ant Design,内容详见分支demo_antd;
- 百度地图开放API,内容详见分支demo_bmap;
- 开源地图引擎Leaflet,内容详见分支demo_leaflet;
- 三维地理信息开发API CityMaker,内容详见分支demo_citymaker;
- JavaScript 的图表库 ECharts,内容详见分支demo_echatrs;
- ecidi数字化研发部BIM模型显示控制插件DGN 插件(WebBIM),内容详见分支demo_dgn;
- 360全景图加载,借助720yun平台实现,内容详见分支demo_720yun;
v1.1.0
- 新增图片和背景图demo,通过require能通过js动态实现图片路径的变动。
- 新增代码检测机制。
- 根据新的代码检测机制调整代码。
- 完成代码检测机制的文档内容。