在小程序中集成redux/immutable/thunk第三方库的方法

一、前言

小程序给我们暴露了两个参数 require 和 module ， require 用来在模块中加载其他模块， module 用来将模块中的方法暴露出去

module.exports = function(){}

所以只要需要让第三方库的代码使用这种形式的 export 就可以了

二、构建Redux的微信小程序包

打一个 Redux 包，让它可以兼容微信小城的加载方式

git clone https://github.com/reactjs/redux.gitnpm install# 详细内容可以到redux项目的package.json中查看# 这些命令是是使用webpack构建UMD模式的包。也就是说所有的代码，包括依赖的库都会被打包到一个文件中，并且自带一段模块加载代码，文件可以在dist目录下找到npm run build:umd && npm run build:umd

用编辑器打开 dist 目录下的 redux.js 文件

(function webpackUniversalModuleDefinition(root, factory) {  if(typeof exports === 'object' && typeof module === 'object')    module.exports = factory();  else if(typeof define === 'function' && define.amd)    define([], factory);  else if(typeof exports === 'object')    exports["Redux"] = factory();  else    root["Redux"] = factory();})(this, function() {... })

这段代码是用来加载模块的，里面的factory函数的返回的内容是用webpack提供的loader组织起来的redux的代码和第三方依赖。

三、集成Redux-devtools

因为微信小程序的开发环境是定制的，暂时没有发现办法直接安装 redux-devtool 的插件

安装remote-redux-devtools

原版的 remote-redux-devtools 使用的一个 websocket 的依赖会使用原生的 WebSocket ，小程序是不支持的，所以需要改成小程序的 websocket 实现,修改好的代码 https://github.com/poetries/wx-redux-immutable-template/blob/master/wx-redux-immutable-template/public/libs/remote-redux-devtools.js

把代码下载到工程目录里面就可以用了

安装和启动remotedev-server

npm install -g remotedev-serverremotedev --hostname=localhost --port=5678

因为没办法用 npm 安装到本地（微信小程序会尝试去加载项目目录中的所有js），所以这里使用全局安装，第二条命令是启动 remotedev-server ， hostname 和 port 分别指定为 localhost 和 5678