React Component Loader

7.0.1

安装

• npm i -D react-redux-component-loader

特性

• 将目录映射为路由
• 支持页面组件、model 的懒加载（默认）
• 针对 React Router v4
• 对 webpack 热打包的完全支持
• 可以自动给 types 加上 namespace
• 简单的"数据绑定"

约定

基本约定

• 每个有 view.jsx 的文件夹都对应一个页面
• 每个页面都需有view.jsx,reducer.js, saga.js 这三个文件，分别对应于视图入口、model、异步操作
• 除了 loader 配置中externals选项中出现的页面，所有页面均需要me.json文件
• 如果最后一级的文件夹名为/list, 那么将拥有两个路由，为${prefix}以及${prefix}/list[${args}], 如果 list 页面需要参数必须使用完整链接
• 如果一个文件夹不存在view.jsx，则该文件夹会被当作公共组件文件夹，其中的所有*.jsx都将被包含入app.bundle.js中

me.json配置

{
  "description": "",
  "crumb": [],
  "route": "/:id?", // 页面的路由参数，具体规则见React-Router的文档
  "sync": true,  // 默认为false，如果设置为true，该页面将不会懒加载
  "retain": true // 默认为false，若设为true，则页面对应的state会retain
}

自动给 type 加上 namespace

• 需要有单独的一个文件导出 types
• 需配置 loader 以及 babel-plugin，方法详见示例中的 types.js部分
• 如果不需要加名空间，type 的值需是:global:开头
• 可以只声明不定义(必须使用let或不推荐的var)，如此将会把标识符的名称作为字符串的值
• 所加的 namespace 前缀可读性你会满意的

版本约束

• React Router: 4
• React Router Redux(如果需要): 5
• React: >=15
• Node: >= 4

示例

具体见example

主要的配置及文件

• webpack.conf: 如果需要提高性能，可以用 externals 大法，可以启用babel-loader的cacheDirectory功能，也可以使用 happyPack
• babel 配置
• 入口文件
• 路由文件
• model 及异步整合

简单的数据绑定

• 在 JSX 的情况下，如果设定data-bind属性为 x，那么将会把值 x 与 model 同名属性 x 绑定

简单运行这个项目

• git clone 该项目
• npm i && cd example && npm i && npm run build
• 打开example/index.html即可