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

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

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

安裝

$ npm install antd-mobile --save

引入組件

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

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

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

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

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

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

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

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

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

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

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

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

在經(jīng)過(guò)一些思索后，發(fā)現(xiàn)這個(gè)問(wèn)題只能用比較hack的方式來(lái)解決：對(duì)于上述計(jì)算最終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);
};

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

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

安裝

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

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

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

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

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

hpe.disable();