vite 项目批量引入文件

技术栈

[email protected]，[email protected]

背景

项目开发中，想要全局注册 comps 文件夹下的组件，有两种方式

1. 在 main 文件中，将组件一个个引入后注册

2. 在 comps 文件夹下，添加 index.js 引入并导出所有组件。在 main 文件中批量引入遍历注册

问题

为了 main 文件的美好观感（代码组织更好），达成代码模块话管理和更高的可维护性，自然选择了方式2

但，这样并不能一劳永逸，每次开发一个新组件都要更新 index.js，人总是懒惰的，于是有了后续操作

过程

1 require.context

在 vite 出现之前，使用 webpack 的时期，require.context  是极好用的，但 require 是 commonJS 的语法，不能在基于 ES 模块的 vite 里使用，无奈

2 fs

于是迂回试试，用 node 提供的 fs 模块，读取文件夹下的所有文件

import * as fs from 'fs'
import * as path from 'path'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)　

未果，卡在了第一步，fileURLToPath 直接报错 Uncaught TypeError: The URL must be of scheme file

原因：

浏览器里执行时，import.meta.url 的值是 http://ip:port/path，在 node 环境里执行时，是 file:///filePath

fileURLToPath 只能接收 file 协议的 URL，返回完整的文件路径

3 import.meta.glob

vite 官方文档中提到了 import.meta.glob 函数，可以从文件系统里导入多个模块，问题解决

附1 vite 项目文件批量导入

const modules = import.meta.glob(`./*.vue`, { eager: true })  // */
const map = {}
for (let key in modules) {
    const name = 'y-' + getKebabCase(key.split('/')[1].split('.')[0])
    map[name] = modules[key].default
}
export default map

附2 wepack 项目文件批量导入

const comps = require.context('./', false, /.(vue)$/)

const modules = comps.keys().reduce((modules, name) => {
  const moduleName = name.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = comps(name)
  modules[moduleName] = value.default
  return modules
}, {})

export default modules

附3 组件注册

import Comps from './components';
const app = createApp(App)
for(const key in Comps) {
    app.component(key, Comps[key])
}

app.mount('#app')