前端工程化 Webpack require.context() 批量導入模塊

隨着前端業務的複雜程度不斷攀升，項目的體量越來越龐大，文件數量也相應倍增。

當一個大欄目需要手動導入幾十上百個模塊時，這簡直就是噩夢：

import a from './modules/a.js';
import b from './modules/b.js';
import c from './modules/c.js';
import d from './modules/d.js';
import 100+... 

const modules = {
	a,
	b,
	c,
	d,
	100+...
};
卒....

Webpack有個開掛批量導入方法：

require.context()

語法：

require.context(directory, includeSubdirs, filter, mode)

require.context函數接收4個參數：

• directory {String} 讀取文件的路徑
• includeSubdirs {Boolean} 是否遍歷文件夾的子目錄
• filter {RegExp} 過濾文件的正則
• mode {String} 加載方式

下面是webpack官方API的介紹：

接下來就可以猛踩油門飆車了：

const files = require.context('./modules', true, /\.js$/); //批量讀取模塊文件

const modules = files.keys().reduce((modules, path) => {
    const name = path.replace(/^\.\/(.*)\.js$/, '$1');
    const module = files(path); 
    modules[name] = module.default;
    return modules;  
}, {});

* 上面的reduce是數組的方法，使用方法見：Array.prototype.reduce()