成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用Browserify構(gòu)建antd-mobile應(yīng)用

tain335 / 1918人閱讀

摘要：但在中，這一問題該如何解決呢使用遇到的問題如何自定義模塊文件后綴名的優(yōu)先級和一樣，也提供了一個叫的配置選項，用于設(shè)定模塊文件的后綴名及其優(yōu)先級。

antd-mobile是螞蟻金服出的移動端設(shè)計指南和前端框架，它提供了一套基于React的移動端組件庫，可以很方便地用來開發(fā)體驗良好的移動應(yīng)用。

使用antd-mobile遇到的問題：react-native模塊找不到

在閱讀了antd-mobile的介紹說明后，使用這一組件庫似乎很簡單，要做的只是安裝和引入組件而已：

安裝

$ npm install antd-mobile --save

引入組件

import { Button } from "antd-mobile/lib/button";
ReactDOM.render(, mountNode);

antd-mobile的介紹說明中推薦使用babel-plugin-import插件來按需加載類庫，但為了減少初期使用antd-mobile所面臨的復(fù)雜度，以上代碼采用了最簡單的組件引入寫法(顯式指定組件的路徑antd-mobile/lib/button，并在HTML文件中多帶帶引入CSS樣式文件antd-mobile/dist/antd-mobile.min.css)。

在安裝完antd-mobile模塊并引入需要的組件后，接下來的一步便是構(gòu)建整個移動應(yīng)用。此時，如果項目不是React Native應(yīng)用，而是Web應(yīng)用的話，構(gòu)建過程會報錯，顯示react-native模塊找不到(Error: Cannot resolve module "react-native"...)。這個錯誤無疑是非常令人困惑的：當(dāng)前所開發(fā)的是一個普通的移動端Web項目，與react-native沒有任何關(guān)系，為什么需要react-native模塊？事實上，即使根據(jù)報錯提示安裝react-native模塊，在后續(xù)的構(gòu)建過程中也會報一些別的錯誤，導(dǎo)致構(gòu)建失敗。

進一步的調(diào)查發(fā)現(xiàn)，問題出在antd-mobile的組件模塊設(shè)計上。由于antd-mobile被設(shè)計為同時支持React Native應(yīng)用開發(fā)和Web應(yīng)用開發(fā)，因此所有的組件都暴露為2個模塊文件：index.js和index.web.js。其中，index.js是給React Native開發(fā)使用的，而index.web.js則是給Web開發(fā)使用的。由于Browserify和Webpack等打包工具在解析JavaScript模塊引入操作時(require或import語句)，會優(yōu)先查找.js后綴名的文件(當(dāng)不指定模塊文件名時，默認文件名即為index.js)，因此即使當(dāng)前項目與React Native無關(guān)，組件模塊的引入操作也會導(dǎo)致對react-native的依賴。

找到問題的原因后，解決方案初步考慮有2種：

引入模塊時，顯式指定模塊文件的文件名(import { Button } from "antd-mobile/lib/button/index.web";?)。

對Browserify或Webpack等打包工具進行配置，更改其模塊引入操作時的后綴名優(yōu)先級，使得.web.js文件得以優(yōu)先使用。

第一種方案比較簡單，對代碼的改動量也很小。但事實證明，這一方案是行不通的：antd-mobile的組件代碼中存在內(nèi)部組件依賴(如List組件依賴ListItem組件，在List組件的index.web.js文件中，會出現(xiàn)require("./ListItem")這樣的代碼)，而這些引入內(nèi)部組件的操作并未指定具體的模塊文件名，因此還是會產(chǎn)生require("./ListItem/index.js")這樣的效果，并最終導(dǎo)致對react-native的依賴。

對于第二種方案，如果是用Webpack打包，則antd-mobile社區(qū)有現(xiàn)成的解決方法 — 設(shè)定extensions選項的值，并將.web.js放在.js之前即可。但在Browserify中，這一問題該如何解決呢？

使用Browserify遇到的問題：如何自定義模塊文件后綴名的優(yōu)先級？

和Webpack一樣，Browserify也提供了一個叫extensions的配置選項，用于設(shè)定模塊文件的后綴名及其優(yōu)先級。但和Webpack不同的是，Browserify中默認的2個模塊文件后綴名(.js和.json)永遠具有最高優(yōu)先級，即使在extensions配置選項中設(shè)定.web.js比.js具有更高的優(yōu)先級(extensions: [".web.js", ".js", ...])也無濟于事。原因在于Browserify源代碼中的以下這一行：

mopts.extensions = [ ".js", ".json" ].concat(mopts.extensions || []);

可以看到，無論設(shè)定的extensions值為何，.js和.json永遠具有最高優(yōu)先級。那么，在這種情況下如何設(shè)定比.js優(yōu)先級還要高的模塊文件后綴名呢？

在經(jīng)過一些思索后，發(fā)現(xiàn)這個問題只能用比較hack的方式來解決：對于上述計算最終extensions值的操作，修改JavaScript中數(shù)組的concat行為，讓mopts.extensions在[ ".js", ".json" ]?數(shù)組之前插入，而不是在其后添加。具體代碼為：

var origin_concat = Array.prototype.concat;

Array.prototype.concat = function() {
 if (this.length === 2 && this[0] === ".js" && this[1] === ".json") {
   return origin_concat.apply(arguments[0], this);
 }
 return origin_concat.apply(this, arguments);
};

運行以上代碼后，就可以通過配置extensions: [".web.js", ...]來用Browserify打包antd-mobile開發(fā)的Web應(yīng)用了。

模塊抽象：browserify-high-priority-extensions

為了方便使用，上述hack Browserify的代碼被抽象為一個模塊：browserify-high-priority-extensions?，其意為”讓Browserify的extensions選項值具有比默認的后綴名更高的優(yōu)先級“。使用該模塊非常簡單：

安裝

$ npm install browserify-high-priority-extensions --save-dev

啟用extensions高優(yōu)先級設(shè)定

var hpe = require("browserify-high-priority-extensions");
hpe.enable();

啟用后，即可通過配置extensions: [".web.js", ...]來用Browserify打包antd-mobile開發(fā)的Web應(yīng)用。

取消extensions高優(yōu)先級設(shè)定
當(dāng)不需要配置extensions選項高優(yōu)先級時，可以用以下語句恢復(fù)到默認狀態(tài)：

hpe.disable();

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80728.html

相關(guān)文章

  • 使用Dva+antd-mobile構(gòu)建一個移動端web

    摘要：整個應(yīng)用的，由多個小的的以為合成該當(dāng)前的狀態(tài)。執(zhí)行異步函數(shù)發(fā)出一個，類似于取的值通過函數(shù)將需要用到的數(shù)據(jù)合并到中，再在組件中取修改的值通過被的會自動在中擁有方法請求統(tǒng)一講用到所有的接口放到中方便管理函數(shù)柯里化 項目地址：dva-demo 隨手一個小star給予動力，謝謝！ Build Setup # install dependencies npm install # serve ...

    Jaden 評論0 收藏0

  • Formik與antd-mobile的移動端的表單實踐（下）

    摘要：會在用戶每次按下提交時進行一次完整校驗或更改時進行一次單表單項的驗證。傳入為表單值與外部自定義傳入的返回值為一個對象的表單提交處理而表單提交的處理，和我們做表單驗證類似，只需要參考官方示例我們就可以簡單的實現(xiàn)表單提交功能。 大家好，工作閑暇之余又來續(xù)寫一下Formik這個庫的文章了，這次文章主要內(nèi)容為如下： 更多表單組件的封裝示例 單選/多選按鈕 選擇器 時間選擇器 文本輸入框 ...

    sihai 評論0 收藏0

  • 做一個合格的前端，gulp資源大集合

    摘要：承接前一篇做一個合格的前端，自動化構(gòu)建工具入門教程故而整理了如下插件資源大全。接下來我會逐一開源觀點網(wǎng)開發(fā)過程中的前后端技術(shù)，如全文索引自定義富文本編輯器圖片上傳壓縮水印等等。 承接前一篇《做一個合格的前端，gulp自動化構(gòu)建工具入門教程》故而整理了如下gulp插件資源大全。**【我的新作觀點網(wǎng)：http://www.guandn.com (觀點網(wǎng)是一個獵獲新奇、收獲知識、重在獨立思考...

    Baoyuan 評論0 收藏0

  • 前端模塊化和構(gòu)建工具

    摘要：以前一直對前端構(gòu)建工具的理解不深，經(jīng)過幾天的研究特意來總結(jié)一下，第一次寫博客，有寫錯的請多多見諒，該文章我也從其他博客拷了一些內(nèi)容，如果有冒犯之處，請指出。強大的設(shè)計使得它更像是一個構(gòu)建平臺，而不只是一個打包工具。 以前一直對前端構(gòu)建工具的理解不深，經(jīng)過幾天的研究特意來總結(jié)一下，第一次寫博客，有寫錯的請多多見諒，該文章我也從其他博客拷了一些內(nèi)容，如果有冒犯之處，請指出。 如今，網(wǎng)頁不再...

    ad6623 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<