前端批量导入方式

webpack批量导入

  • webpack中使用 require.context 实现自动导入
js 复制代码
const files = require.context('./modules', false, /\.ts$/);
const modules = {};
files.keys().forEach((key) => {
     if (key === './index.ts') { return; }
     modules[key.replace(/(\.\/|\.ts)/g, '')] = files(key).default;
});
export default modules;

vite批量导入

  • vite中使用 import.meta.glob 实现自动导入
js 复制代码
//Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块:
const modules = import.meta.glob('./dir/*.js')
//以上将会被转译为下面的样子:
// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js')
}
//你可以遍历 modules 对象的 key 值来访问相应的模块:
for (const path in modules) {
  modules[path]().then((mod) => {
    console.log(path, mod)
  })
}
//匹配到的文件默认是懒加载的,通过动态导入实现,并会在构建时分离为独立的 chunk。如果你倾向于直接引入所有的模块(例如依赖于这些模块中的副作用首先被应用),
//你可以传入 { eager: true } 作为第二个参数:
const modules = import.meta.glob('./dir/*.js', { eager: true })
//以上会被转译为下面的样子:
// vite 生成的代码
import * as __glob__0_0 from './dir/foo.js'
import * as __glob__0_1 from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1
}
//具名导入,也可能你只想要导入模块中的部分内容,那么可以利用 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 })
相关推荐
2503_928411562 小时前
9.26 数据可视化
前端·javascript·信息可视化·html5
我叫唧唧波2 小时前
【打包工具】webpack基础
前端·webpack
知识分享小能手4 小时前
React学习教程,从入门到精通,React 单元测试:语法知识点及使用方法详解(30)
前端·javascript·vue.js·学习·react.js·单元测试·前端框架
PineappleCoder7 小时前
搞定用户登录体验:双 Token 认证(Vue+Koa2)从 0 到 1 实现无感刷新
前端·vue.js·koa
EveryPossible7 小时前
展示内容框
前端·javascript·css
伊织code8 小时前
WebGoat - 刻意设计的不安全Web应用程序
前端·安全·webgoat
子兮曰8 小时前
Vue3 生命周期与组件通信深度解析
前端·javascript·vue.js
拉不动的猪8 小时前
回顾关于筛选时的隐式返回和显示返回
前端·javascript·面试
yinuo8 小时前
不写一行JS!纯CSS如何读取HTML属性实现Tooltip
前端
gnip9 小时前
脚本加载失败重试机制
前端·javascript