在小程序中集成redux/immutable/thunk第三方库 | 前端进阶之旅

# 一、前言

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

module.exports = function(){}

@前端进阶之旅: 代码已经复制到剪贴板

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

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

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

git clone https://github.com/reactjs/redux.git

npm 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加载进来
将第二行代码：if(typeof exports === 'object' && typeof module === 'object') 修改成：if(typeof module === 'object')
这样修改的原因是，在微信小程序的环境中是没有ex

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

(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() { ... })