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

阳光穿透心脏的1/2处 2023-02-21 02:28 12阅读 0赞

## require.context介绍 ##

`require.context`是一个webpack的api,通过执行`require.context`函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块

## require.context使用场景： ##

![在这里插入图片描述][20200628135923714.png]

在Vue写的项目中,我把路由通过不同的功能划分成不同的模块,在index.js中一个个导入(原谅ide的警告-.-),但是如果项目变大了之后,每次手动import会显得有些力不从心,这里可以使用`require.context`函数遍历modules文件夹的所有文件一次性导入到index.js中

## require.context介绍 ##

`require.context`函数接受三个参数

*  `directory {String}` \-读取文件的路径
 *  `useSubdirectories {Boolean}` \-是否遍历文件的子目录
 *  `regExp {RegExp}` \-匹配文件的正则

## require.context实例演示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]

**main.js代码：**

const path = require('path')
    const requireComponent = require.context('@/views/components', false, /\.vue$/)
    //此处配置 webpack的简洁路径@为src，所以路径为src//views/components
    requireComponent
      .keys()
      .reverse()
      .forEach(filename => { 
        const componentConfig = requireComponent(filename)
        const componentName = path.basename(filename, '.vue')
        // 全局注册组件
        Vue.component(
          componentName,
          // 如果这个组件选项是通过 `export default` 导出的，
          // 那么就会优先使用 `.default`，
          // 否则回退到使用模块的根。
          componentConfig.default || componentConfig
        )
      })

简洁路径配置：

**普通webpack(webpack.config.base.js)**

resolve: { 
        modules: ['node_modules'],
        extensions: ['.css', '.less', '.scss', '.js', '.vue', '.json'],
        alias: { 
          '~': process.cwd(),
          '@': path.join(process.cwd(), 'src'),
          vue: 'vue/dist/vue.common.js',
          buildPath: buildPath,
        },
      },

**vue-cli3配置的（vue.config.js）**

configureWebpack: { 
        resolve: { 
          alias: { 
            '@': resolve('src'),
            '~': process.cwd()
          }
        }
      },

**在项目中使用**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 1]

代码：

[20200628135923714.png]: https://img-blog.csdnimg.cn/20200628135923714.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200628140343166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200628141004924.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx,size_16,color_FFFFFF,t_70