require.context 自动化全局注册

为什么使用全局注册

在开发vue项目过程中，如组件等过多的话，注册起来是一件很麻烦的事情，
每个用到的页面都要引入一次, 要是能全局引用,每个页面可自行使用那将是很愉快的事情。
今天就来看下怎么引入自动化注册进而很大程度上减少工作量。

怎么实现自动化全局注册

webpack 使用 require.context 可以动态引入文件,我们可以借助这个方法实现自动化注册。
require.context 通过正则匹配到可能的文件，全部引入。
如果我们想自定义这个正则规则的话，可以自己写一个 require.context 。
语法：require.context('./dir', true, /\.js$/)；
第一个参数表示相对的文件目录，
第二个参数表示是否包括子目录中的文件（true，false），
第三个参数表示引入的文件匹配的正则表达式。
举个栗子

const context = require.context('./dir', true, /\.js$/);
const keys = context.keys(); 
// => ["./another-first-level.js", "./first-level.js", "./sub-dir/second-level.js"]

实现自动化部署路由其实也很简单, 如下

//main.js
//自动化注册全局组件
const requireComponent = require.context('./components/global', true, /\.vue$/);
requireComponent.keys().forEach(fileName => {
    // 获取组件配置
    const componentConfig = requireComponent(fileName);
    // 剥去文件名开头的 `./` 和`.vue`结尾的扩展名
    const componentName = fileName.replace(/^\.\//,'').replace(/\.vue$/,'');
    // 全局注册组件
    const component = Vue.component(
        componentName.replace(/\//,'-'),
        componentConfig.default || componentConfig
    );
});

OK, 是不是很简单, 这样以后在每个页面使用组件时, 就不要引入了, 直接使用即可~