webpack require.context 自动化导入Vue全局组件

// main.js
/**
 * 驼峰命名转横杠命名
 * @param {*} str 
 * @returns {*} 返回xxx-xxx
 */
function kebabCase (str) {
  const hyphenateRE = /([^-])([A-Z])/g;
  return str
    .replace(hyphenateRE, '$1-$2')
    .replace(hyphenateRE, '$1-$2')
    .toLowerCase();
}

// 上下文模块导出一个(require)函数，该函数接受一个参数:(一般是keys导出的文件路径)。
const requireComponent = require.context('./components/globals', true, /\.vue$/);
requireComponent.keys().map(fileName => {
  console.log(fileName)
  // 获取组件
  const componentConfig = requireComponent(fileName);
  // 剥去文件名开头的 `./` 和`.vue`结尾的扩展名
  const componentName = fileName.replace(/^\.\//, '').replace(/\.vue$/, '');
  const kebabCaseName = kebabCase(componentName);
  // 全局注册组件
  Vue.component(
    kebabCaseName,
    // 如果这个组件选项是通过 `export default` 导出的，那么就会优先使用 `.default`，否则回退到使用模块的根。
    componentConfig.default || componentConfig
  );
});