likes
comments
collection
share

动态引入模块：Webpack require.context 的灵活运用

作者站长头像
站长
· 阅读数 18

require.context 是一个非常有用的 Webpack API，它允许我们在编译时动态地引入模块。这个功能在一些场景下非常有用，比如需要动态加载模块、实现国际化、主题切换等功能时会经常用到。

require.context API 说明

官方文档：依赖管理 | webpack 中文文档

首先，让我们了解一下 require.context 的使用方式。它的基本语法是：

require.context(directory, useSubdirectories, regExp)

其中：

  • directory 是要搜索的目录
  • useSubdirectories 表示是否搜索子目录
  • regExp 是匹配文件的正则表达式

当 Webpack 编译时，require.context 会根据传入的参数在指定的目录中进行递归搜索，并返回一个函数。这个函数有三个属性：resolve、keys 和 id。

  1. resolve 函数用于解析模块请求，它接受一个参数，即请求的模块路径，返回这个模块对应的 ID。这样可以方便地根据模块路径获取模块 ID，用于在构建时动态引入模块。
  2. keys 属性是一个函数，返回一个数组，包含了指定目录下所有匹配的模块的相对路径。这个数组可以被遍历，用于动态加载模块。
  3. id 属性是这个上下文模块的 ID。这个 ID 在 Webpack 构建过程中是唯一的，可以用于标识这个上下文模块。

对 require.context 功能进行简要说明：

  • 在 Webpack 编译时，当遇到 require.context 声明时，Webpack 会根据传入的参数进行递归文件搜索，并生成一个模块列表。
  • 然后，在运行时，当调用 require.context 返回的函数时，实际上是根据之前生成的模块列表进行动态模块引入。

举例说明

当使用 require.context 时，我们可以通过一个简单的示例来说明它的用法和作用。假设我们有一个项目结构如下：

- src
  - components
    - basic
      - Button.js
      - Input.js
    - index.js

现在我们想要动态地导入 components 目录下所有以 .js 结尾的文件，并在 index.js 中统一导出这些组件。我们可以利用 require.context 来实现这个功能。

首先，准备好 Button Input 组件

const Button = (props) => {
  return <button>{props.value}</button>;
}
export default Button;

const Input = (props) => {
  return <input value={props.value} />;
}
export default Input;

然后，在 index.js 文件中使用 require.context：

const context = require.context('./basic', false, /.jsx$/);

const components = {};

context.keys().forEach((key) => {
  const componentName = key.replace('./', '').replace('.jsx', '');
  components[componentName] = context(key).default;
});

export default components;

在上面的代码中，我们首先使用 require.context 引入 components 目录下所有以 .js 结尾的文件，然后遍历这些文件，将每个组件的默认导出存储在一个对象中，并以文件名（去掉路径和扩展名）作为键名。

接着，我们可以在其他文件中使用这个统一导出的组件集合：

import React from 'react';
import components from './components';

const App = () => {
  return (
    <div>
      <components.Button value='我是 Button 组件' />
      <components.Input value='我是 Input 组件' />
    </div>
  );
};

export default App;

通过这种方式，我们可以动态地导入 components 目录下的所有组件，而不需要手动列出每个组件的引入语句。这样可以极大地简化代码结构，提高代码的可维护性和扩展性。

Webpack 中 require.context 的实现

将上述例子打包编译后，观察 require.context 的实际代码

var map = {
	"./Button.jsx": "./src/components/basic/Button.jsx",
	"./Input.jsx": "./src/components/basic/Input.jsx"
};


function webpackContext(req) {
	var id = webpackContextResolve(req);
	return __webpack_require__(id);
}
function webpackContextResolve(req) {
	if(!__webpack_require__.o(map, req)) {
		var e = new Error("Cannot find module '" + req + "'");
		e.code = 'MODULE_NOT_FOUND';
		throw e;
	}
	return map[req];
}
webpackContext.keys = function webpackContextKeys() {
	return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "./src/components/basic sync \.jsx$";

代码说明：

  • 它创建了一个模拟的上下文模块，用于根据模块路径动态加载对应的模块。
  • 在代码中，map 对象表示了模块路径和实际模块文件路径之间的映射关系。例如，"./Button.jsx" 对应着实际文件路径 "./src/components/basic/Button.jsx"。
  • 接下来，定义了两个函数 webpackContext 和 webpackContextResolve。
    • webpackContext 函数用于根据传入的模块路径参数 req，调用 webpackContextResolve 函数解析对应的实际模块路径，并最终通过 __webpack_require__ 加载该模块。
    • webpackContextResolve 函数则用于根据传入的模块路径 req 在 map 对象中查找对应的实际模块文件路径。如果找不到对应的映射关系，则抛出一个错误。
  • 此外，还定义了 webpackContext.keys 方法，用于返回所有模块路径的数组，即 map 对象中的所有键。
  • 最后，使用 module.exports 导出了 webpackContext 函数作为模块的输出，以便在其他地方使用这个模拟的上下文模块。

实际应用

场景说明

动态引入模块：Webpack require.context 的灵活运用

代码说明

  1. 根据条件动态创建 script 标签，加载 mobile.extend.min.js
// 动态创建 script 标签
const loadScript = (url) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = () => {
      resolve(true);
    };
    script.onerror = (error) => {
      reject(error);
    };
    document.head.appendChild(script);
  });
}
  1. 进入具体某一菜单，加载对应的扩展模块
loadModule('module2');
function loadModule(moduleName) {
  try {
    // 使用 keys 方法获取匹配的模块路径数组
    const modulePaths = extendsContext.keys().filter(path => path.includes(moduleName));

    // 如果没有找到匹配的模块，抛出错误
    if (modulePaths.length === 0) {
      throw new Error(`Cannot find module '${moduleName}'`);
    }

    // 加载第一个匹配的模块
    const modulePath = modulePaths[0];
    const module = extendsContext(modulePath);

    // 返回加载的模块
    return module;
  } catch (error) {
    console.error(error);
  }
}

总结

  1. require.context 实际上是借助 Webpack 在编译阶段生成的模块列表，提供了一种在运行时动态引入模块的机制。
  2. 这种机制为开发者在特定的场景下提供了更灵活、高效的模块引入方式，极大地增强了 Webpack 的功能和应用范围。
  3. 在实际的开发中，我们可以利用 require.context 来实现动态加载模块，简化代码结构，提高开发效率。