前端工程自动化

前端开发中，难免会遇到比如需要批量import或者require的文件。如果只是几个文件，单纯手动写下还可以，随着项目工程的逐渐变多，组件越来越多的时候。就需要考虑通过自动读取，自动载入的方式去做。这边就需要引入require.context的概念。它可以完美的解决痛点。

当项目文件多的时候

require.context是什么

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

举个例子

在vue的项目中，我们通常都需要引入vuex，项目模块多的时候，vuex也需要分modules。如下图做了简单的举例，在store的文件夹下，我们通常会分一个modules的文件夹放不同模块的文件。

store

那么我们就可以在modules下创建一个index.js文件，用于批量导入模块的方法。

/**
 * 该文件将当前文件夹下的所有.js结尾的文件全部读取出来。
 * 并导出去
 */


const files = require.context('.', true, /\.js$/)
const modules = {}

files.keys().forEach(key => {
  if (key === './index.js') return
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})

console.log(' == modules ==', modules)

export default modules

require.context使用方法方法分析

语法: require.context(directory, useSubdirectories = false, regExp = /^.//);
require.context函数接收三个参数，分别为

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