摘要：我們按照提供的思路，對(duì)路由按業(yè)務(wù)模塊進(jìn)行拆分。這時(shí)就可以使用到了打包入口文件自動(dòng)引入子目錄下所有文件參考分享使用的實(shí)現(xiàn)路由去中心化管理之用法的基礎(chǔ)組件的自動(dòng)化全局注冊(cè)官方文檔

You can create your own context with the require.context() function.

It allows you to pass in a directory to search, a flag indicating whether subdirectories should be searched too, and a regular expression to match files against.

webpack parses for require.context() in the code while building.

webpack文檔 - require.context

require.context是webpack中，用來(lái)創(chuàng)建自己的（模塊）上下文；
webpack會(huì)在代碼構(gòu)建的時(shí)候去解析該函數(shù)

require.context(directory, useSubdirectories = false, regExp = /^.//);

該方法有3個(gè)參數(shù)：

需要搜索的文件夾目錄（必傳）

是否需要搜索它的子孫目錄，默認(rèn)為false

匹配文件名的正則表達(dá)式

// 示例
const test = require.context("./string", false, /.js$/);

我的目錄結(jié)構(gòu)如下：

String

trim.js

trimLeft.js

trimRight.js

test

test1.js

*

這時(shí)候如果console.log(test),就會(huì)發(fā)現(xiàn)調(diào)用require.context之后返回的是一個(gè)函數(shù)

webpackContext(req) {
  var id = webpackContextResolve(req);
  return __webpack_require__(id);
}

這次如果還需要深入就需要去webpack打包之后的文件中尋找了：

var map = {
    "./test/test1.js": "./src/string/test/test1.js",
    "./trim.js": "./src/string/trim.js",
    "./trimLeft.js": "./src/string/trimLeft.js",
    "./trimRight.js": "./src/string/trimRight.js"
};


function webpackContext(req) {
    var id = webpackContextResolve(req);
    return __webpack_require__(id);
}
function webpackContextResolve(req) {
    var id = map[req];
    if(!(id + 1)) { // check for number or string
        var e = new Error("Cannot find module "" + req + """);
        e.code = "MODULE_NOT_FOUND";
        throw e;
    }
    return id;
}
webpackContext.keys = function webpackContextKeys() {
    return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "./src/string sync recursive .js$";

由上面的代碼可以看出，在webpackContext定義了多個(gè)方法和屬性

console.log(webpackContext.id) // "./src/string sync recursive .js$"

console.log(webpackContext("./trim.js")) // "./src/string/trim.js"

console.log(webpackContext.keys()) // ["./test/test1.js", "./trim.js", "./trimLeft.js", "./trimRight.js"]

具體就不多說(shuō)了，直接看文檔
vue官方文檔 - 基礎(chǔ)組件的自動(dòng)化全局注冊(cè)

當(dāng)你的單頁(yè)應(yīng)用變成了大型應(yīng)用后，路由也在慢慢的增多

// rootRoute.js
const rootRoute = {
  childRoutes: [
    {
      path: "/",
      component: AppLayout,
      childRoutes: [
        {
          path: "shop", // 購(gòu)買詳情頁(yè)
          component: ShopLayout,
          childRoutes: [
            {
              path: "foodDetail",
              component: FoodDetail
            },
            {
              path: "shoesDetail",
              component: ShoesDetail
            }
            // 其他
          ]
        },
        {
          path: "order", // 訂單頁(yè)
          component: Order,
          childRoutes: [
            {
              path: "remark", //訂單備注
              component: Remark
            },
            {
              path: "invoice", //發(fā)票抬頭
              component: Invoice
            },
            {
              path: "payment", //付款頁(yè)面
              component: Payment
            },
            {
              path: "userValidation", //用戶驗(yàn)證
              component: UserValidation
            },
            {
              path: "chooseAddress", //選擇地址
              component: ChooseAddress,
              childRoutes: [
                {
                  path: "addAddress", //添加地址
                  component: AddAddress,
                  childRoutes: [
                    {
                      path: "searchAddress", //搜索地址
                      component: SearchAddress
                    }
                  ]
                }
              ]
            }
          ]
        }
        // ...
        // 大量新增路由
        // ...
      ]
    }
  ]
};

當(dāng)路由變的越來(lái)越大，大到已經(jīng)難以維護(hù)時(shí)。我們按照react-router提供的思路，對(duì)路由按業(yè)務(wù)模塊進(jìn)行拆分。

// rootRoute.js
const rootRoute = {
  childRoutes: [
    {
      path: "/",
      component: AppLayout,
      childRoutes: [
        require("./modules/shop/route"), //購(gòu)買詳情頁(yè)
        require("./modules/order/route"), // 訂單頁(yè)
        require("./modules/login/route"), // 登錄注冊(cè)頁(yè)
        require("./modules/service/route"), // 服務(wù)中心
        // ...
        // 其他大量新增路由
        // ...
      ]
    }
  ]
};

再進(jìn)一步優(yōu)化的話，就可以使用require.context

const rootRoute = {
  childRoutes: [
    {
      path: "/",
      component: AppLayout,
      childRoutes: (r => {
        return r.keys().map(key => r(key));
      })(require.context("./", true, /^./modules/((?!/)[sS])+/route.js$/))
    }
  ]
};

比如我現(xiàn)在想要造一個(gè)自己的工具庫(kù)utils，那么隨著工具函數(shù)數(shù)量的增加，勢(shì)必需要將代碼分割得更小，甚至細(xì)化到一個(gè)工具函數(shù)對(duì)應(yīng)一個(gè)js文件。

這時(shí)如果還需要在入口js文件中一個(gè)個(gè)手動(dòng)引用，那么每增加一個(gè)js文件，就需要重新去修改入口js一次，工程量是非常大的。

這時(shí)就可以使用到require.context了~

/**
 * @desc webpack打包入口文件  
 * @example 自動(dòng)引入子目錄下所有js文件
 */
let moduleExports = {};

const r = require.context("./", true, /^./.+/.+.js$/);
r.keys().forEach(key => {
    let attr = key.substring(key.lastIndexOf("/") + 1, key.lastIndexOf("."));
    moduleExports[attr] = r(key);
});

module.exports = moduleExports;

分享：使用 webpack 的 require.context 實(shí)現(xiàn)路由“去中心化”管理

webpack 之 require.context 用法

vue的基礎(chǔ)組件的自動(dòng)化全局注冊(cè)

webpack官方文檔 - require-context