在小程序中集成redux/immutable/thunk第三方庫(kù)的方法

一、前言

小程序給我們暴露了兩個(gè)參數(shù) require 和 module ， require 用來在模塊中加載其他模塊， module 用來將模塊中的方法暴露出去

module.exports = function(){}

所以只要需要讓第三方庫(kù)的代碼使用這種形式的 export 就可以了

二、構(gòu)建Redux的微信小程序包

打一個(gè) Redux 包，讓它可以兼容微信小城的加載方式

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

npm install

# 詳細(xì)內(nèi)容可以到redux項(xiàng)目的package.json中查看
# 這些命令是是使用webpack構(gòu)建UMD模式的包。也就是說所有的代碼，包括依賴的庫(kù)都會(huì)被打包到一個(gè)文件中，并且自帶一段模塊加載代碼，文件可以在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函數(shù)的返回的內(nèi)容是用webpack提供的loader組織起來的redux的代碼和第三方依賴。

• 如果我們把這個(gè)文件拷貝到小程序中，只需要讓程序能正常進(jìn)入第三行代碼，就能把Redux加載進(jìn)來
• 將第二行代碼： if(typeof exports === 'object' && typeof module === 'object') 修改成： if(typeof module === 'object')
• 這樣修改的原因是，在微信小程序的環(huán)境中是沒有exports變量的，所以就沒辦法正確進(jìn)入這個(gè)分支，刪除之后就可以正確進(jìn)入
• 我們拷貝到 libs 目錄下，那么我們?cè)诔绦蛑惺褂脮r(shí)，只要當(dāng)做是一個(gè)本地模塊去 require 就可以了 var redux = require('./libs/redux.js')
• 我們可以通過類似的方法，使用 Webpack 打包第三方庫(kù)，就可以集成任何庫(kù)了
  

三、集成Redux-devtools

因?yàn)槲⑿判〕绦虻拈_發(fā)環(huán)境是定制的，暫時(shí)沒有發(fā)現(xiàn)辦法直接安裝 redux-devtool 的插件

安裝remote-redux-devtools

原版的 remote-redux-devtools 使用的一個(gè) websocket 的依賴會(huì)使用原生的 WebSocket ，小程序是不支持的，所以需要改成小程序的 websocket 實(shí)現(xiàn),修改好的代碼 https://github.com/poetries/wx-redux-immutable-template/blob/master/wx-redux-immutable-template/public/libs/remote-redux-devtools.js

把代碼下載到工程目錄里面就可以用了

安裝和啟動(dòng)remotedev-server

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

因?yàn)闆]辦法用 npm 安裝到本地（微信小程序會(huì)嘗試去加載項(xiàng)目目錄中的所有js），所以這里使用全局安裝，第二條命令是啟動(dòng) 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 是指定為之前啟動(dòng) remotedev-server 啟動(dòng)時(shí)候指定的參數(shù)。保存之后重啟一下小程序，如果沒有報(bào)錯(cuò)的話就OK了

可以在瀏覽器中訪問 localhost:5678

四、小程序中集成immutable

Immutable 是 Facebook 開發(fā)的不可變數(shù)據(jù)集合。不可變數(shù)據(jù)一旦創(chuàng)建就不能被修改，是的應(yīng)用開發(fā)更簡(jiǎn)單，允許使用函數(shù)式編程技術(shù)，比如惰性評(píng)估。微信小程序無法直接使用 Immutable.js ，下面就來說說微信小程序如何使用第三方庫(kù) Immutable.js

Immutable使用了UMD模塊化規(guī)范

(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 代碼，注釋原有模塊導(dǎo)出語(yǔ)句，使用 module.exports = factory() 強(qiáng)制導(dǎo)出

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。