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、多组件的注册；