vite动态导入多个模块

在vite中支持动态导入，支持import.meta.glob导入多个模块glob 导入

// 动态导入
const module = await import(`./dir/${file}.js`)

// 导入多个模块
const modules = import.meta.glob('./dir/*.js')

但是动态导入虽然支持动态，但是变量仅代表一层深的文件名。如果 file 是 foo/bar，导入将会失败。

const file = 'foo/bar'
const module = await import(`./dir/${file}.js`) 	// [!code error]
// [plugin:vite:import-glob] Invalid glob import syntax: Could only use literals

使用导入多个模块，又没办法使用变量！！！

需求

有个需求，项目需要在不同的环境下，使用不同的动态路由，就需要根据环境引入不同的页面，如果全部放在一个模块下导入，必然导致引入无用的文件

怎么能同时导入多个模块，又可以使用变量呢？？？

解决办法

通过使用路径别名，实现动态的多模块导入

vite文档中，对glob导入注意事项的说明

• 该 Glob 模式会被当成导入标识符：必须是相对路径（以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析）或一个别名路径（请看 resolve.alias 选项)。
• 你还需注意，所有 import.meta.glob 的参数都必须以字面量传入。你 不 可以在其中使用变量或表达式。

文件结构

└─src
  │  App.vue
  │  main.ts
  ├─components
  └─modules
      ├─bar
      │      demo3.ts
      │      demo4.ts
      └─foo
              demo1.ts
              demo2.ts

配置别名

// vite.config.ts

const module = 'foo'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // 需要转换为绝对路径！！！
      // 这里就可以使用变量了，通过改变别名所表示的路径引入不同的文件
      "~": resolve(__dirname, 'src/modules/' + module)
    }
  }
})

搞定！

// 这样就可以动态的导入多模块了
const modules = import.meta.glob('~/*.ts')

其他配置tsconfig.json别名配置，不多赘述。

欢迎大家发评论进行讨论！