自动导入模块 动态加载组件 webpack--require.context、vite--import.meta.glob

封装自动导出组件index.ts

require.context版

// context 函数会返回一个导入函数 importFn
// 它有一个属性 keys() 获取所有的文件路径
const importFn = require.context('./', false, /\.vue$/)

const coms = {}

importFn.keys().forEach((item: string) => {
    // 注意: 这里需要 .default才可以找到路径
    const com = importFn(item).default
    const name = item.match(/(\w+)\.vue/)[1]
    const comName: string = com.name || name.replace(name[0], name[0].toUpperCase());
    coms[comName] = com
});
module.exports = coms

使用

<GButton>按钮</GButton>
const { GButton } = require('/@/components/lib')
components: {
  GButton
}

import.meta.glob版

const context = import.meta.glob('./*.vue', {eager: true, import: 'default'});

const coms: { [key: string]: any } = {};

for (const path in context) {
  const name = path.match(/(\w+)\.vue/)?.[1] || '';
  const comName: string = name.replace(name[0], name[0].toUpperCase());
  const com = context[path] || {};
  coms[comName] = com;
}

export default coms;

使用

<GButton>按钮</GButton>
import { GButton } from '/@/components/lib'

node 的fs 加载文件名

const fs = require('fs')
const path = require('path')

const directoryPath = './src/assets/icons' // 替换为你的文件夹路径

const files = fs.readdirSync(directoryPath)

const list = files
  .filter((file: any) => file.endsWith('.svg'))
  .map((file: any) => `i-icon-${path.basename(file, '.svg')}`)
console.log('list: ', list)


export default list

webpack--require.context

你还可以通过 require.context() 函数来创建自己的 context。

可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。

Webpack 会在构建中解析代码中的 require.context() 。

语法如下：

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
);

示例

// context 函数会返回一个导入函数 importFn
// 它有一个属性 keys() 获取所有的文件路径
const importFn = require.context('./', false, /\.vue$/)
importFn.keys().forEach(item => {
    // 注意: 这里需要 .default才可以找到路径
    const com = importFn(item).default
    app.component(com.name, com)
})

参考链接

webpack.docschina.org/guides/depe…

vite--import.meta.glob

import.meta.glob 都支持以字符串形式导入文件，类似于 以字符串形式导入资源。在这里，我们使用了 Import Reflection 语法对导入进行断言：

const modules = import.meta.glob('./dir/*.js', { as: 'raw' })

上面的代码会被转换为下面这样：

// code produced by vite（代码由 vite 输出）
const modules = {
  './dir/foo.js': 'export default "foo"\n',
  './dir/bar.js': 'export default "bar"\n',
}

// 使用:
Object.keys(modules).forEach(url => {
   const module = modules[url].default
   const name = url.split('/').pop().replace(/\.js|\.ts/,'');
})

{ as: 'url' } 还支持将资源作为 URL 加载。

多个匹配模式¶

第一个参数可以是一个 glob 数组，例如：

const modules = import.meta.glob(['./dir/*.js', './another/*.js'])

反面匹配模式¶

同样也支持反面 glob 匹配模式（以 ! 作为前缀）。若要忽略结果中的一些文件，你可以添加“排除匹配模式”作为第一个参数：

const modules = import.meta.glob(['./dir/*.js', '!**/bar.js'])

// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
}

具名导入¶

也可能你只想要导入模块中的部分内容，那么可以利用 import 选项。

const modules = import.meta.glob('./dir/*.js', { import: 'setup' })

// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js').then((m) => m.setup),
  './dir/bar.js': () => import('./dir/bar.js').then((m) => m.setup),
}

当与 eager 一同存在时，甚至可以对这些模块进行 tree-shaking。

const modules = import.meta.glob('./dir/*.js', { import: 'setup', eager: true })

// vite 生成的代码
import { setup as __glob__0_0 } from './dir/foo.js'
import { setup as __glob__0_1 } from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1,
}

设置 import 为 default 可以加载默认导出。

const modules = import.meta.glob('./dir/*.js', {
  import: 'default',
  eager: true,
})

// vite 生成的代码
import __glob__0_0 from './dir/foo.js'
import __glob__0_1 from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1,
}

自定义查询¶

你也可以使用 query 选项来提供对导入的自定义查询，以供其他插件使用。

const modules = import.meta.glob('./dir/*.js', {
  query: { foo: 'bar', bar: true },
})

// vite 生成的代码
const modules = {
  './dir/foo.js': () =>
    import('./dir/foo.js?foo=bar&bar=true'),
  './dir/bar.js': () =>
    import('./dir/bar.js?foo=bar&bar=true'),
}

Glob 导入注意事项¶

请注意：

• 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
• 该 Glob 模式会被当成导入标识符：必须是相对路径（以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析）或一个别名路径（请看 resolve.alias 选项)。
• Glob 匹配是使用 fast-glob 来实现的 —— 阅读它的文档来查阅 支持的 Glob 模式。
• 你还需注意，所有 import.meta.glob 的参数都必须以字面量传入。你 不 可以在其中使用变量或表达式。
• import.meta.globEager 已经弃用，请使用 import.meta.glob('*', { eager: true }) 来代替。

参考链接

cn.vitejs.dev/guide/featu…