Vue：利用require.context自动注册组件

原创

彭世瑜 2022-02-28 16:24:00 ©著作权

©著作权归作者所有：来自51CTO博客作者彭世瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任

Webpack中有一个函数

require.context(directory, useSubdirectories = false, regExp = /^\.\//)

参数：

directory：要搜索的文件夹目录
useSubdirectories：是否还应该搜索它的子目录
regExp：一个匹配文件的正则表达式

自动注册Vue组件（适用于高频组件）

//  global.js文件 Vue.use(global);

function changeStr(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

// 查找同级目录下以vue结尾的组件
const requireComponent = require.context("./", false, /\.vue$/);

// 对外暴露install方法
const install = (Vue) => {
  requireComponent.keys().forEach((fileName) => {
    let config = requireComponent(fileName);

    console.log(config); // ./child1.vue 然后用正则拿到child1
    let componentName = changeStr(
      fileName.replace(/^\.\//, "").replace(/\.\w+$/, "")
    );
    Vue.component(componentName, config.default || config);
  });
};

export default {
  // 对外暴露install方法
  install,
};