自动化全局注册组件

目录

组件注册除了全局注册和局部注册以外，为了方便还有一种自动化全局注册组件方法。

自动化全局注册组件避免了局部注册每次使用组件都需要导入的麻烦，也省去了全局注册组件时在main.js文件中的大量代码。

自动化的难点在于如何才能让编译器去自动访问读取模块文件，而  require.context() 可以实现这个功能，require.context() 是webpack 提供的一个方法，用于查找指定文件夹下的指定类型文件。

1.创建自动化全局注册组件的文件夹

2.在自动化全局注册组件文件夹 base 中创建 index.js 文件

3.在 main.js 中引入 index.js 文件

4.然后直接使用组件就可以了，不需要任何导入

5.require.context()

1.require.context() 是实现前端工程化引入组文件的方法。

2.webpackContent

6.总结

---

组件注册除了全局注册和局部注册以外，为了方便还有一种自动化全局注册组件方法。

自动化全局注册组件避免了局部注册每次使用组件都需要导入的麻烦，也省去了全局注册组件时在main.js文件中的大量代码。

自动化的难点在于如何才能让编译器去自动访问读取模块文件，而  require.context() 可以实现这个功能，require.context() 是webpack 提供的一个方法，用于查找指定文件夹下的指定类型文件。

1.创建自动化全局注册组件的文件夹

众所周知，我们的公共组件都是放在 /src/components 文件夹中，在这里面可以再创建一个 base 文件夹，单独存放那些需要自动化注册的组件。

2.在自动化全局注册组件文件夹 base 中创建 index.js 文件

该 index.js 文件存放的是一些配置信息。

// 基础组件的自动化全局注册
import Vue from "vue";
const webpackContext = require.context(
  // 其组件目录的相对路径，因为 index.js 文件和其他组件文件在同一目录下，所以 ./
  "./",
  // 是否查询其子目录
  true,
  // 匹配基础组件文件名的正则表达式
  /\.vue$/
);
webpackContext.keys().forEach((fileName) => {
  // 获取组件配置
  const componentConfig = webpackContext(fileName);
  // 全局注册组件
  Vue.component(
    componentConfig.default.name, // 此处的name,是组件属性定义的name
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default
  );
});

自动化全局注册组件需要使用到 require.context 方法，下文详解。

需要注意的是：

1.  /\.vue$/  : 这个是匹配组件名称的正则表达式，这里用的是最常用的 匹配 .vue 文件（一般我们创建公共组件用的就是 vue 文件），具体情况需要根据实际的组件名和规则进行配置。

2. componentConfig.default.name : 这个是表示组件的名称，不是固定写法，这里的 default.name 表示的是组件实例的 name 属性。还可以直接解析fileName得出文件夹的名称作为组件名称也是可以的。

3.在 main.js 中引入 index.js 文件

4.然后直接使用组件就可以了，不需要任何导入

5.require.context()

1.require.context() 是实现前端工程化引入组文件的方法。

require.context(directory, useSubdirectories, regExp, mode = 'sync')

接受四个参数：

1. directory ：表示检索的目录，比如上文中的 ./ ，因为 index.js 文件和其他组件文件在同一目录下，所以 ./ 。
2. useSubdirectorise ：表示是否检索子文件夹。上文中 组件文件 index.vue 是在 input 文件夹下，所以这里为 true。
3. regExp ：匹re则表达式。
4. mode ：加载模式，同步/异步。

require.context() 返回值是一个函数 webpackContent（为了方便，此时也给这个函数起名为 webpackContent），该函数相当于 require，接受以一个路径字符串参数，该路径参数只能是 require.context() 查找到的路径，下文有讲到。

2.webpackContent

我们打印看一下 webpackContent。

可以看到打印出来的确实是一个 webpackContent 函数。

webpackContent 函数有两个静态方法和一个属性：

属性/方法	描述	类型
keys	返回成功获取到的模块组成的数组	function
resolve	接收参数为匹配成功的模块路径，即keys中存储的值；其返回匹配文件相对于整个项目的相对路径	function
id	上下文模块的模块ID	string

webpackContent.keys() 可以获取到 require.context() 查找到的路径，返回是一个路径组成的数组。

 

这个路径数组就是我们 require.context() 检索获取的目录列表，因为测试时候只有一个 input 文件夹，所以此时数组只有一个值。

至于 resolve 方法，是获取文件的相对路径。

console.log(requireComponent.resolve(requireComponent.keys()[0]));

上文在自动化注册全局组件的时候，对这个路径数组进行了遍历。

// 基础组件的自动化全局注册
import Vue from "vue";
const webpackContext = require.context(
  // 其组件目录的相对路径
  "./",
  // 是否查询其子目录
  true,
  // 匹配基础组件文件名的正则表达式
  /\.vue$/
);
console.log(webpackContext);
console.log(webpackContext.keys());
console.log(webpackContext.resolve(webpackContext.keys()[0]));
webpackContext.keys().forEach((fileName) => {
  // 获取组件配置
  const componentConfig = webpackContext(fileName);
  console.log(componentConfig);
  // 全局注册组件
  Vue.component(
    componentConfig.default.name, // 此处的name,是组件属性定义的name
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default
  );
});

文中遍历路径数组的时候，又调用了 webpackContent 函数，参数就是此时的路径，也对应了上文说的 require.context() 返回值是一个函数 webpackContent，该函数相当于 require，接受以一个路径字符串参数，该路径参数只能是 require.context() 查找到的路径。

打印 这个函数的调用结果，是一个 Module，里面存放了对应的组件实例信息。

然后再调用 Vue.components 方法去注册全局组件，第一个参数是组件名称，可以用实例的 name 属性，也可以用组件文件夹的名称，第二个参数就是组件实例了。

6.总结

自动化注册全局组件，就是获取到组件列表然后通过循环遍历的方式使用 Vue.components 去一个一个全局注册组件。