基于webpack的require.context()API，批量自动注册全局Vue组件

基于webpack的require.context()API，批量自动注册全局Vue组件

在vue的项目中，我们很多时候都会用到组件，有时候一个组件只用一次，有时候一个组件在很多地方都要用到。

那么为了代码的简洁，以及避免我们开发时做更多的重复性的操作，对于那些会在很多地方都用到的组件，我们有必要将其注册为全局组件，以便一次注册，全局调用，免得不停的import。

为了达到这个目的，我们需要一个专门放置全局组件的文件夹，以及一个处理文件夹中文件的js脚本。如下:

// global-components.js
import Vue from 'vue'

createApp(App).use(router).use(store).mount('#app')
// 首字母大写函数
function uppercaseFirstWord (str) {   return str.charAt(0).toUpperCase() + str.slice(1) }
// 引入目录下的全部组件
// 从左到右参数依次为： 读取的组件所在路径、是否包含子目录、过滤文件的正则
const requireComponent = require.context('.', false, /\.vue$/)
// 生成组件路径字符串数组并遍历
requireComponent.keys().forEach(filePath => { 
    // 获取到当前组件的配置   
    const config = requireComponent(filePath)
    // 将组件路径字符串格式化成正确的组件名   
    const componentName = uppercaseFirstWord(filePath.replace(/^\.\//, '').replace(/\.\w+$/, '')) 
    // 全局注册当前组件   
    Vue.component(componentName, config.default || config) // 解析： // require.context返回一个webpackContext方法，该方法有3个属性： // id:上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到。 // keys:一个函数，它返回一个数组，由所有可能被上下文模块处理的请求组成。 // resolve:一个函数，它返回请求被解析后得到的模块id // 对于最后的config.default || config，解析请前往https://www.cnblogs.com/cangqinglang/p/10445256.html
})

如图，将上面的global-components.js文件放入commons文件夹下，然后将所有的全局组件也放在commons文件夹中，那么当我们启动vue项目时，就会自动注册commons文件夹中所有的全局组件，省去了每一次使用组件时都要手动引入注册等操作，从此一劳永逸。当然这也是不影响按需引入的，只要别把按需引入的组件放到这个文件夹下就行了。

require.context能做的事还很多，例如注册路由等。