用Browserify構建antd-mobile應用

tain335 發布于2019-08-20 11:58 / 1916人閱讀

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

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

使用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所面臨的復雜度，以上代碼采用了最簡單的組件引入寫法(顯式指定組件的路徑antd-mobile/lib/button，并在HTML文件中多帶帶引入CSS樣式文件antd-mobile/dist/antd-mobile.min.css)。

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

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

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

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

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

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

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

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

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

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

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

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

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開發的Web應用了。

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

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

安裝

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

啟用extensions高優先級設定

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

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

取消extensions高優先級設定
當不需要配置extensions選項高優先級時，可以用以下語句恢復到默認狀態：

hpe.disable();

云服務器 GPU云服務器 saas應用構建構建多頁應用構建安全的php應用數據庫應用程序構建器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80728.html

使用Dva+antd-mobile構建一個移動端web

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

Jaden 2019-08-23 13:51 評論0 收藏0
Formik與antd-mobile的移動端的表單實踐（下）

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

sihai 2019-08-23 12:09 評論0 收藏0
做一個合格的前端，gulp資源大集合

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

Baoyuan 2019-08-22 13:54 評論0 收藏0
前端模塊化和構建工具

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

ad6623 2019-08-20 18:37 評論0 收藏0