VUE学习（三）基于webpack使用 require.context 全局注册通用的基础组件

一、全部代码

/// 全局组件自动配置  START
const requireComponent = require.context(
  // 其组件目录的相对路径
  "./views/components",
  // 是否查询其子目录
  true,
  // 匹配基础组件文件名的正则表达式
  /\w.(vue|js)/
);

// For each matching file name...  对应每个匹配的文件名
requireComponent.keys().forEach(fileName => {
  // Get the component config  获取组件配置
  const componentConfig = requireComponent(fileName);

  // 获取组件的 PascalCase 命名
  // 获取和目录深度无关的文件名 (获取组件的组件名)
  const componentName = fileName
    .split("/")
    .pop()
    .replace(/\.\w+$/, "");

  // Globally register the component  全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  );
});
/// 全局组件自动配置  END

二、代码解析

2.1、匹配正则表达式

就是获取组件目录下的单文件的方式

const requireComponent = require.context(
  // 其组件目录的相对路径
  "./views/components",
  // 是否查询其子目录
  true,
  // 匹配基础组件文件名的正则表达式
  /\w.(vue|js)/
);

2.2、通过require.context获取的符合正则表达式的文件通过循环添加到全局组件Vue.component(name,Loading)

requireComponent.keys().forEach(fileName => {}）

例如：Vue.component(name,Loading)

import Vue from 'vue';
// 引入loading组件 
import Loading from './loading.vue';
// 将loading注册为全局组件，在别的组件中通过<loading>标签使用Loading组件
Vue.component('loading', Loading);

2.3、输出Vue.component(name,in)的name

fileName为一个“./XXX”的字符，而Vue.component(name,Loading) 全局组件的name为“XXX”，没有“./”,所以要用正则去掉.

// 获取和目录深度无关的文件名 (获取组件的组件名)
  const componentName = fileName
    .split("/")
    .pop()
    .replace(/\.\w+$/, "");