01-Vite实现Webpack的require.context的效果

Vite中实现·Webpack中require.context的效果，进行批量导入文件，以Vue组件注册为例。

• 文件目录

• main.js

import { createApp, VueElement } from 'vue'
import App from './App.vue'
import myComponent from '@/components/index'
const app =createApp(App);
app.use(myComponent)
app.mount('#app')

• form.vue

<template>
  <form>
    <slot>my is form component</slot>
  </form>
</template>

• index.js

const modules = import.meta.glob('./**/*.vue')
function install(app,options) {
  for(const path in modules) {
    let pathArr = path.split('/');
    let length = pathArr.length;
    const componentName = pathArr[length - 1].split('.')[0]
    modules[path]().then((mod) =>{
      console.log(path,mod)
      console.log(componentName)
      app.component(`i-${componentName}`,mod.default)
    })
  }
}
export default {
  install,
}

• 存在bug 组件注册没有报错，在第一次使用是也能正常出现。但是在form嵌套使用 i-form-item 组件时，刷新页面后，无法正常渲染。