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

大家好，我是咸鱼，一条可咸可咸了，却依然要蹦跶几下追梦的咸鱼 ^_^.

require.context是什么

一个webpack的特定方法,通过执行require.context函数获取一个特定的上下文,进行更细粒度的模块引入，主要用来实现自动化导入模块。

参数配置

require.context(
  directory: String, /* 路径 */
  includeSubdirs: Boolean /* 可选的，是否查找子目录，默认值是 true */,
  filter: RegExp /* 可选的，要查找的文件类型的正则，默认值是 /^\.\/.*$/，所有文件 */,
  mode: String  /* 可选的， 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once'，默认值是 'sync' */
)

demo示例

我们以全局组件注册为例

组件文件夹components目录:

components下的index.js文件代码:

import Vue from "vue";
import upperFirst from "lodash/upperFirst";
import camelCase from "lodash/camelCase";

const PREFIX = "gs-";
const requireContext = require.context(
  // 其组件目录的相对路径
  "./",
  // 是否查询其子目录
  true,
  // 匹配基础组件文件名的正则表达式
  /^\.\/(?:[a-z][^/]*\/)([A-Z]\w+)\.vue$/
);

requireContext.keys().forEach((fileName) => {
  // 获取组件配置
  let componentConfig = {};

  try {
    componentConfig = requireContext(
      fileName.replace(/\/[A-Z]\w+\.vue$/, "/index.js")
    );
  } catch (e) {
    componentConfig = requireContext(fileName);
  }

  // 获取组件的 PascalCase 命名
  let componentName = upperFirst(
    camelCase(
      // 剥去文件名开头的 `'./` 和结尾的扩展名
      fileName.replace(/^\.\/?.*\/([A-Z]\w+)\.vue$/, `${PREFIX}$1`)
    )
  );
  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  );
});

至此，就实现了用require.context方法自动全局注册组件了，再有新的组件，只需要写在components目录下就可以了。

ps：components文件夹说明文档

1、文件夹统一使用 kebab-case 模式

2、组件文件名和相应的name属性统一, 使用文件夹名称的 PascalCase 模式

3、不需要自动加载的， 请以 _ 开头