在小程序中集成redux/immutable/thunk第三方庫(kù)的方法
一、前言
小程序給我們暴露了兩個(gè)參數(shù) require 和 module , require 用來(lái)在模塊中加載其他模塊, module 用來(lái)將模塊中的方法暴露出去
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模式的包。也就是說(shuō)所有的代碼,包括依賴的庫(kù)都會(huì)被打包到一個(gè)文件中,并且自帶一段模塊加載代碼,文件可以在dist目錄下找到 npm run build:umd && npm run build:umd
用編輯器打開(kāi) 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() { ... })
這段代碼是用來(lái)加載模塊的,里面的factory函數(shù)的返回的內(nèi)容是用webpack提供的loader組織起來(lái)的redux的代碼和第三方依賴。
- 如果我們把這個(gè)文件拷貝到小程序中,只需要讓程序能正常進(jìn)入第三行代碼,就能把Redux加載進(jìn)來(lái)
- 將第二行代碼: if(typeof exports === 'object' && typeof module === 'object') 修改成: if(typeof module === 'object')
- 這樣修改的原因是,在微信小程序的環(huán)境中是沒(méi)有exports變量的,所以就沒(méi)辦法正確進(jìn)入這個(gè)分支,刪除之后就可以正確進(jìn)入
- 我們拷貝到 libs 目錄下,那么我們?cè)诔绦蛑惺褂脮r(shí),只要當(dāng)做是一個(gè)本地模塊去 require 就可以了 var redux = require('./libs/redux.js')
- 我們可以通過(guò)類似的方法,使用 Webpack 打包第三方庫(kù),就可以集成任何庫(kù)了
三、集成Redux-devtools
因?yàn)槲⑿判〕绦虻拈_(kāi)發(fā)環(huán)境是定制的,暫時(shí)沒(méi)有發(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)闆](méi)辦法用 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ù)。保存之后重啟一下小程序,如果沒(méi)有報(bào)錯(cuò)的話就OK了
可以在瀏覽器中訪問(wèn) localhost:5678
四、小程序中集成immutable
Immutable 是 Facebook 開(kāi)發(fā)的不可變數(shù)據(jù)集合。不可變數(shù)據(jù)一旦創(chuàng)建就不能被修改,是的應(yīng)用開(kāi)發(fā)更簡(jiǎn)單,允許使用函數(shù)式編程技術(shù),比如惰性評(píng)估。微信小程序無(wú)法直接使用 Immutable.js ,下面就來(lái)說(shuō)說(shuō)微信小程序如何使用第三方庫(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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
如何判斷出一個(gè)js對(duì)象是否一個(gè)dom對(duì)象
如何判斷出一個(gè)js對(duì)象是否一個(gè)dom對(duì)象呢?下面小編就為大家?guī)?lái)一篇判斷出一個(gè)js對(duì)象是否一個(gè)dom對(duì)象的方法。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2016-11-11webpack-cli在webpack打包中的作用小結(jié)
webpack?是打包代碼時(shí)依賴的核心內(nèi)容,而?webpack-cli?是一個(gè)用來(lái)在命令行中運(yùn)行?webpack?的工具,那么webpack-cli在webpack打包中的作用是什么,本文就詳細(xì)的介紹一下,感興趣的可以了解一下2022-04-04用瀑布流的方式在網(wǎng)頁(yè)上插入圖片的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇用瀑布流的方式在網(wǎng)頁(yè)上插入圖片的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09在js文件中寫(xiě)el表達(dá)式取不到值的原因及解決方法
在js文件中寫(xiě)el表達(dá)式取不到值,百度一下,將經(jīng)驗(yàn)總結(jié)如下,有類似情況的朋友可以參考下2013-12-12原生JavaScript實(shí)現(xiàn)幻燈片效果
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)幻燈片效果,文中安裝步驟介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02