require.context()的使用

require.context()方法
作用：創建當前模塊的上下文
用法：require.context(directory, flag, regExp)

directory: 要導入的當前模塊的文件夾目錄
flag: 是否搜索當前路徑的子目錄
regExp: 要匹配的文件

 

 

 

1.resolve() :它返回請求被解析后得到的模塊 id
2.keys(): 返回當前所有搜索到的文件的數組
3.id: 上下文模塊里面所包含的模塊 id

項目環境：使用webpack webpack-cli 打包

 

 案例的場景，在該項目的根目錄下使用yarn build:lang命令，即可將i18ns下的多個語言包，按照文件夾合並成一個大對象並在index.js中導出；

 

 

導出的對象示例：

 

 在項目build文件下，新建一個bin文件夾，再新建一個build-lang.js文件，結構如下圖：

 

 build-lang.js文件內容如下：

var fs = require('fs');
var render = require('json-templater/string');
var path = require('path');
var endOfLine = require('os').EOL;

var OUTPUT_PATH = path.join(__dirname, '../../src/i18ns/index.js');
var IMPORT_TEMPLATE = 'import deepmerge from \'deepmerge\';\nconst lang = {};'; 
var REQUIRE_TEMPLATE = 'const {{ctxName}} = require.context(\'./{{langType}}\', true, /\.js$/);\nlang[\'{{langType}}\'] = {{ctxName}}.keys().reduce((total, key) => deepmerge(total, {{ctxName}}(key).default), {});';
var MAIN_TEMPLATE = `/* Automatically generated by './build/bin/build-lang.js' */
{{include}}
console.log('lang', lang)
export default lang;
`;

var filePath = path.resolve(__dirname, "../../src/i18ns");
var files = fs.readdirSync(filePath)
var langList = [];
files.forEach(function (item, index) {
  if (item !== "index.js") {
    langList.push(item)
  }
})

var includeLangType = [];
includeLangType.push(IMPORT_TEMPLATE);
langList.forEach((item, index) => {
  includeLangType.push(render(REQUIRE_TEMPLATE, {
    ctxName: `ctx${index}`,
    langType: item
  }))
})

var template = render(MAIN_TEMPLATE, {
  include: includeLangType.join(endOfLine),
});

fs.writeFileSync(OUTPUT_PATH, template);

然后在package.json中配置腳本：

"build:lang": "node build/bin/build-lang.js",

然后測試下：執行 yarn build:lang

查看i18ns/index.js內容是否為：

/* Automatically generated by './build/bin/build-lang.js' */
import deepmerge from 'deepmerge';
const lang = {};
const ctx0 = require.context('./en', true, /.js$/);
lang['en'] = ctx0.keys().reduce((total, key) => deepmerge(total, ctx0(key).default), {});
const ctx1 = require.context('./zh-CN', true, /.js$/);
lang['zh-CN'] = ctx1.keys().reduce((total, key) => deepmerge(total, ctx1(key).default), {});
export default lang;

 

 

其他使用場景：

1、 require.context()也可以進行多模塊路由的自動導入配置

2、多組件的注冊；