批量导入

• 自动化注册组件

  // global.js
  import Vue from 'vue'
  import upperFirst from 'lodash/upperFirst'
  import camelCase from 'lodash/camelCase'
  
  const requireComponent = require.context(
    // 其组件目录的相对路径
    // 全局注册的目录
    .,
    // 是否查询其子目录
    false,
    // 匹配基础组件文件名的正则表达式
    // /Base[A-Z]\w+\.(vue|js)$/
    /\.vue$/
  )
  
  requireComponent.keys().forEach(fileName => {
    // 获取组件配置
    const componentConfig = requireComponent(fileName)
  
    // 获取组件的 PascalCase 命名
    const componentName = upperFirst(
      camelCase(
        // 获取和目录深度无关的文件名
        fileName
          // .split('/')
          // .pop()
          .replace(/^\.\//,'')
          // ‘./ComA.vue’ => 'ComA.vue'
          .replace(/\.\w+$/, '')
          // => 'ComA'
      )
    )
  
    // 全局注册组件
    Vue.component(
      componentName,
      // 如果这个组件选项是通过 `export default` 导出的，
      // 那么就会优先使用 `.default`，
      // 否则回退到使用模块的根。
      componentConfig.default || componentConfig
    )
  })

• 自动化注册路由

  // router.js
  import Vue from 'vue'
  import Router from 'vue-router'
  
  Vue.use(Router)
  
  const routerList = []
  
  const importAllRouter = r => {
    r.keys().forEach(key=>{
      routerList.push(r[key].default  /*export default*/)
    })
  }
  
  importAllRouter(require.context(./* 查询目录*/,true/*是否包含子目录*/,/\.router\.js//*匹配正则*/))
  
  export default new Router({
    ...routerList
  })

• 管理 graph 文件（同理）

  

  const context = require.context("./", true, /\.gql$|\.graphql$/);
  
  const map = {};
  
  for (const key of context.keys()) {
    const keyArr = key.split("/");
    keyArr.shift();
    const _key = keyArr[1]; // 删掉文件夹名
    map[_key.replace(/\.gql$|\.graphql$/g, "")] = context(key);
  }
  export default map;

• vite中的批量导入

  fast-glob

  // 异步
  const path = './*.js'
  import modules = import.meta.glob(path)
  
  Object.entries(modules).forEach([k,v]=>{
    v().then(m=>m.default)
  })

  //同步
  import modules = import.meta.globEager(path)
  Object.entries(modules).forEach([k,v]=>{
    v().then(m=>m.default)
    console.log(k,v.default)
  })