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


Posted in Javascript onAugust 12, 2018

一、前言

小程序给我们暴露了两个参数 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')
  • 这样修改的原因是,在微信小程序的环境中是没有exports变量的,所以就没办法正确进入这个分支,删除之后就可以正确进入
  • 我们拷贝到 libs 目录下,那么我们在程序中使用时,只要当做是一个本地模块去 require 就可以了 var redux = require('./libs/redux.js')
  • 我们可以通过类似的方法,使用 Webpack 打包第三方库,就可以集成任何库了

三、集成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-server
remotedev --hostname=localhost --port=5678

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

集成devtool

在 store 下集成 devtool

const {createStore, compose} = require('./libs/redux.js');
const devTools = require('./libs/remote-redux-devtools.js').default;
const reducer = require('./reducers/index.js')

function configureStore() {
 return createStore(reducer, compose(devTools({
  hostname: 'localhost',
  port: 5678,
  secure: false
 })));
}

module.exports = configureStore;

把 devtool 使用 redux 的 compose 加到 store 中去。 hostname 和 port 是指定为之前启动 remotedev-server 启动时候指定的参数。保存之后重启一下小程序,如果没有报错的话就OK了

可以在浏览器中访问 localhost:5678

四、小程序中集成immutable

Immutable 是 Facebook 开发的不可变数据集合。不可变数据一旦创建就不能被修改,是的应用开发更简单,允许使用函数式编程技术,比如惰性评估。微信小程序无法直接使用 Immutable.js ,下面就来说说微信小程序如何使用第三方库 Immutable.js

Immutable使用了UMD模块化规范

(function (global, factory) {
 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 typeof define === 'function' && define.amd ? define(factory) :
 (global.Immutable = factory());
}(this, function () { 'use strict';var SLICE$0 = Array.prototype.slice;

....

}));

修改 Immutable 代码,注释原有模块导出语句,使用 module.exports = factory() 强制导出

(function(global, factory) {
 /*
 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 typeof define === 'function' && define.amd ? define(factory) :
 (global.Immutable = factory());
 */

 module.exports = factory();

}(this, function() {

导入修改好的 immutable 到小程序中即可 https://github.com/poetries/wx-redux-immutable-template/blob/master/wx-redux-immutable-template/public/libs/immutable.js

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
通用javascript脚本函数库 方便开发
Oct 13 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
Vue slot用法(小结)
Oct 22 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
前端 javascript 实现文件下载的示例
Nov 24 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 Javascript
Vue实现左右菜单联动实现代码
Aug 12 #Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 #Javascript
vue实现商品加减计算总价的实例代码
Aug 12 #Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 #Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 #Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 #Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 #Javascript
You might like
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
js获取视频时长代码
2014/04/10 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
使用Python对Access读写操作
2017/03/30 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
python 产生token及token验证的方法
2018/12/26 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
EJB面试题
2015/07/28 面试题
美术指导求职信
2014/03/17 职场文书
实习评语大全
2014/04/26 职场文书
安全温馨提示语大全
2015/07/14 职场文书
《折线统计图》教学反思
2016/02/22 职场文书