首页 > 其他分享 >vite从文件系统导入多个模块

vite从文件系统导入多个模块

时间:2022-08-18 11:12:37浏览次数:60  
标签:files const modules 文件系统 导入 meta import vite

官方文档:

https://cn.vitejs.dev/guide/features.html#glob-import

 

 

导入模块:

import.meta.glob 为过动态导入,构建时,会分离为独立的 chunk

const files = import.meta.glob('./modules/*.js')
const modules = {}
for (const key in files) {
    files[key]().then(res=>{
        modules[key.replace(/^\.\/modules\/(.*)\.\w+$/, '$1')] = res.default
    })
}

Object.keys(modules).forEach(item => {
    modules[item]['namespaced'] = true
})

export default createStore({
    modules
})

 

import.meta.globEager 为直接引入

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

const modules = {}
for (const key in files) {
    modules[key.replace(/^\.\/modules\/(.*)\.\w+$/, '$1')]=files[key].default
}

Object.keys(modules).forEach(item => {
  // 为每个模块添加一个前缀名,保证模块命明不冲突 
    modules[item]['namespaced'] = true
})

 

总结:

1.import.meta.glob 或 import.meta.globEager 导入需要导入的文件,注意路径匹配
2.遍历files,根据导入方式做不同的处理
3.方法不限于vuex的模块导入,这里只是简单的例子

标签:files,const,modules,文件系统,导入,meta,import,vite
From: https://www.cnblogs.com/wang715100018066/p/16597984.html

相关文章

  • dedecms支持ppt一键导入
    ​项目需求可发布文章需求涉及到富文本编辑器经过查阅我选择了较为简便不需要后端支持可独立完成的tinymce框架官方文档也是相当完整虽然都是全英文但是有强大的谷......
  • 文件系统格式化,挂载目录及写入数据
    硬盘       分区 ..........格式化..................挂载目录-----------写入数据。毛坯       分主卧、次卧、厨房、客厅............ ......
  • vue3+vite3打包组件的踩坑心得
    1.再要做CDN的JS文件的时候要使用  rollup-plugin-external-globals这个插件,但是不做CDN的时候要关闭注释掉,不然引入插件后可能会报一些依赖库的全局变量未声明的错误,......
  • 记录:excel导入导出js-xlsx,处理合并
    效果前情提要后端传excel坐标数据,前端自己处理模板,找资料后,选择直接载入xlsx方式。准备工作npmixlsximport*asXLSXfrom'xlsx'导入提取数据letreader......
  • JSP指令导入标签库、JSP指令导入注释
    JSP指令导入标签库includ:页面包含的,导入页面的资源文件ttavlib:导入资源  JSP指令导入注释1,html注释:<!---->:只能注释html代码片段2,......
  • 达梦dexpdp,dimpdp导出导入数据
    1.创建directorySQL>createdirectorydirectas'/dm8/direct';executedsuccessfullyusedtime:48.272(ms).Executeidis503.2.创建测试用户SQL>createuse......
  • Win10导入Deepin到WSL
    Win10导入Deepin到WSL准备工作首先要确保开启了Hyper-V,注意:VirtulBox与这个冲突。方法:控制面板->程序与功能->打开或者关闭Windows功能打开虚拟化,BootCamp可以尝试......
  • Win10导入Deepin到WSL
    #Win10导入Deepin到WSL##准备工作*首先要确保开启了Hyper-V,**注意:VirtulBox与这个冲突**。方法:控制面板->程序与功能->打开或者关闭Windows功能*打开虚拟......
  • 记一次sql文件导入错误
    乘着暑假的时候想学习一下SpringCloud的相关技术,但在跟着教程时,导入sql文件的时候出现了问题。百度搜索发现在运行sql文件前需要提前创建数据库。但创建数据库之后依然......
  • system desing 系统设计(三): 分布式文件系统distributed file system设计原理
    1、众所周知,数据要想永久保存,肯定是要放磁盘的啦!磁盘和内存不一样,内存最小的存储单位是byte,1byte=8bit;但是磁盘不一样了,最小存储单位是sector,1sector=512byte......