在前端开发中，我们经常需要使用多个模块或者组件来完成一个功能。而这些模块和组件可能分布在不同的文件夹中，这时候就需要对这些文件进行逐个引入。这个过程比较繁琐，使得代码可读性差，也容易出错。
为了解决这个问题，我们可以使用 npm 包 require-globify，它可以帮助我们将多个模块和组件一次性引入到代码中，从而提高代码的可读性和可维护性。
安装 require-globify
首先，我们需要安装 require-globify。在命令行中输入以下命令：
npm install require-globify --save-dev
如果你使用的是 yarn，可以使用以下命令：
yarn add require-globify --dev
使用 require-globify
require-globify 可以将指定路径下的所有模块和组件都引入进来，并且返回一个数组。操作非常简单，只需要按照以下步骤进行即可。
1. 导入 require-globify
在 js 文件中导入 require-globify：
const requireGlob = require('require-globify');
2. 使用 require-globify
接着，我们可以使用 require-globify 将指定路径下的所有模块和组件引入进来，并返回一个数组：
const components = requireGlob('./components/**/*.js');
上面的代码将会引入 ./components 文件夹下的所有 js 文件，并返回一个包含这些文件的数组。
3. 使用引入的模块和组件
最后，我们可以使用引入的模块和组件完成我们的功能。例如，我们需要在页面上添加多个组件，可以按照以下方式进行：
components.forEach(component => { document.body.appendChild(component()); });
上面的代码将会遍历包含组件的数组，并将每个组件添加到页面的 body 中。
示例代码
-- -------------------- ---- ------- -- -- --------------- ----- ----------- - --------------------------- -- -- --------------- ------------- ----- ---------- - ------------------------------------ -- ------------ ---------------------------- -- - --------------------------------------- ---展开代码
总结
require-globify 可以帮助我们一次性引入多个模块和组件，从而提高代码的可读性和可维护性。通过上述步骤，我们就可以轻松地使用 require-globify。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/45764
