require.context实现前端工程自动化

原创已于 2022-03-28 18:16:32 修改 · 393 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

于 2022-03-28 15:19:30 首次发布

webpack 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何利用webpack的require.context API实现前端工程的自动化导入模块。通过require.context，可以遍历文件夹并自动导入其中的指定文件，避免手动import，提高工作效率。

require.context实现前端工程自动化

webpack的api，主要用来实现自动化导入模块，在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块

require.context()函数接受三个参数

1，directory {String} -文件夹路径

2，useSubdirectories {Boolean} -是否遍历文件的子目录

3，regExp {RegExp} -匹配文件的正则

require.context(directory,useSubdirectories,regExp)

在这里插入图片描述
输出台console

在组件中给组件定义name

在这里插入图片描述
输出台console

const requireComponents = require.context('@/components', true, /[a-z0-9]+\.(jsx?|vue)$/i)

requireComponents.keys().forEach(filename => { // filename:文件相对于@/components的文件位置字符串
  // 组件实例
  const component = requireComponents(filename)
  const componentName = component.default.name
  if (componentName) {
    Vue.component(componentName, component.default ||component )
  }
})