美文网首页
import.meta.glob批量引入文件

import.meta.glob批量引入文件

作者: small_zeo | 来源:发表于2022-01-22 17:03 被阅读0次

    Glob 导入

    Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块:

    const modules = import.meta.glob('./src/*.js');
    

    以上将会被转译为下面的样子:

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

    你可以遍历 modules 对象的 key 值来访问相应的模块:

      Object.keys(modules).forEach(url => {
        const li = document.createElement('li');
        ul.appendChild(li);
        const link = document.createElement('a');
        li.appendChild(link);
        const pathname = url.split('/').pop().split('.ts')[0];
        link.href = `#${url}`
        link.innerText = pathname;
        link.addEventListener('click', () => location.hash = url);
      })
    

    匹配到的文件默认是懒加载的,通过动态导入实现,并会在构建时分离为独立的 chunk。

    import.meta.globEager

    如果你倾向于直接引入所有的模块(例如依赖于这些模块中的副作用首先被应用),你可以使用 import.meta.globEager 代替:

    const modules = import.meta.globEager('./src/*.js')
    

    以上会被转译为下面的样子:

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

    请注意

    • 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
    • 该 Glob 模式会被当成导入标识符:必须是相对路径(以 ./ 开头)或绝对路径(以 / 开头,相对于项目根目录解析)。
    • Glob 匹配是使用 fast-glob 来实现的 —— 阅读它的文档来查阅 支持的 Glob 模式
    • 你还需注意,glob 的导入不接受变量,你应直接传递字符串模式。
    • glob 模式不能包含与包裹引号相同的引号字符串(其中包括 '",```),例如,如果你想实现 '/Tom\'s files/**' 的效果,请使用 "/Tom's files/**" 代替。

    参考链接

    glob-import

    相关文章

      网友评论

          本文标题:import.meta.glob批量引入文件

          本文链接:https://www.haomeiwen.com/subject/exouhrtx.html