浅谈vite之import.meta
一. 解析
开发者使用一个模块时,有时需要知道模板本身的一些信息(比如模块的路径)。现在有一个提案,为 import 命令添加了一个元属性
import.meta,返回当前模块的元信息。
import.meta只能在模块内部使用,如果在模块外部使用会报错。
这个属性返回一个对象,该对象的各种属性就是当前运行的脚本的元信息。具体包含哪些属性,标准没有规定,由各个运行环境自行决定。一般来说,import.meta至少会有下面两个属性。
(1)import.meta.url
import.meta.url返回当前模块的 URL 路径。举例来说,当前模块主文件的路径是https://foo.com/main.js,import.meta.url就返回这个路径。如果模块里面还有一个数据文件data.txt,那么就可以用下面的代码,获取这个数据文件的路径。
new URL('data.txt', import.meta.url)
注意,Node.js 环境中,import.meta.url返回的总是本地路径,即是file:URL协议的字符串,比如file:///home/user/foo.js。
(2)import.meta.scriptElement
import.meta.scriptElement是浏览器特有的元属性,返回加载模块的那个<script>元素,相当于document.currentScript属性。
// HTML 代码为
// <script type="module" src="my-module.js" data-foo="abc"></script>
// my-module.js 内部执行下面的代码
import.meta.scriptElement.dataset.foo
// "abc"
二. 应用
1. 动态环境变量:基于Vite和Rollup插件系统,import.meta.env 能够自动将.env文件的值注入到你的代码中。
- 根目录下新建
.env(默认环境),.env.development和.env.production
NODE_ENV = "development"
VITE_BASE_URL = "http://127.0.0.1:3333"
- 通过 import.meta.env.VITE_BASE_URL 读取环境变量的参数
- import.meta.env.MODE: {string}应用程序运行的模式。
- import.meta.env.BASE_URL:{string}应用程序提供服务的基础url。这由基本配置选项决定。
- import.meta.env.PROD: {boolean}是否在生产环境中运行
- import.meta.env.DEV: {boolean}应用是否在开发中运行(总是与import.meta.env.PROD相反)
2.import.meta.glob() 是一个 ES 模块的特殊属性,用于动态导入多个模块
- import.meta.glob() 方法接受一个模式字符串作为参数,并返回一个Promise,该Promise 析为一个对象,该对象包含匹配该模式的所有模块的键值对。
- 模式字符串可以包含通配符 *,用于匹配多个模块。例如,import.meta.glob('./modules/*.js') 可以匹配当前目录下以 .js 结尾的所有模块。
- 使用 import.meta.glob() 可以方便地批量导入模块,而不需要手动一个一个地导入。
需要注意的是,
import.meta.glob() 是 ES 模块的特性,
目前仅在一些现代浏览器和支持 ES 模块的 Node.js 版本中可用,
在旧的浏览器或 Node.js 版本中,可能需要使用其他方式来实现类似的功能
在这里,使用import.meta.glob(),导入指定模式的固定路由模块,代码如下:
/** 自动导入全部静态路由,无需再手动引入!匹配 src/router/modules 目录(任何嵌套级别)中具有 .ts 扩展名的所有文件,如果需要做排除,请使用'!'符号,例如:!./modules/*** 如何匹配所有文件请看:https://github.com/mrmlnc/fast-glob#basic-syntax* 如何排除文件请看:https://cn.vitejs.dev/guide/features.html#negative-patterns*/
// 导入非result相关路由
const fixedModules = import.meta.glob('./modules/**/!(result).ts', { eager: true })
// 导入result相关路由
const resultModules = import.meta.glob('./modules/**/result.ts', { eager: true })
//导入所有路由
const modules: Record<string, any> = import.meta.glob(['./modules/**/*.ts'], { eager: true })
模式字符串 ./modules/**/!(result).ts 解析如下:
- ./modules/:表示要匹配的文件路径的起始部分,
- **/:表示可以匹配任意多层子目录,
- !(result):表示排除匹配到的文件名为result的文件,
- .ts:表示文件扩展名为.ts
- { eager: true }参数表示立即加载这些模块
相关文章:
浅谈vite之import.meta
一. 解析 开发者使用一个模块时,有时需要知道模板本身的一些信息(比如模块的路径)。现在有一个提案,为 import 命令添加了一个元属性 import.meta,返回当前模块的元信息。 import.meta只能在模块内部使用,如…...
【Pytorch实用教程】Pytorch中nn.Sequential的用法
nn.Sequential 是 PyTorch 中用于构建神经网络的一种容器类,它可以按顺序封装多个子模块(层),并依次将输入数据传递给这些子模块。这样可以简化模型的定义,使得代码更加简洁和易读。 文章目录 基本用法方法一:直接传递子模块方法二:使用 `OrderedDict`动态构建模型优点注…...
Shopify被封?Shopify店铺开店到防封全面指南
Shopify,作为独立电商建站领域的佼佼者,其SaaS模式简化了建站流程,无需编程背景即可创建线上店铺,吸引了众多商家的目光。本文将详细讲解Shopify店铺从注册、运营到防封的每一个关键环节,为商家提供一站式指导…...
11. 盛最多水的容器
一题目: 二:代码: class Solution { public:int maxArea(vector<int>& height) {int l0;int rheight.size()-1;int ans0;while(l<r){int a(r-l)*min(height[l],height[r]);ansmax(ans,a);if(height[l]<height[r]) l;else r-…...
react如何父子组件传参
在React中,父子组件之间的传参主要通过props(属性)来实现。子组件通过props接收来自父组件的数据,而父组件则可以通过在子组件标签上设置属性(即props)来传递数据。下面是一个简单的例子来说明这个过程。 …...
【C++】二维数组 数组名
二维数组名用途 1、查看所占内存空间 2、查看二维数组首地址 针对第一种用途,还可以计算数组有多少行、多少列、多少元素 针对第二种用途,数组元素、行数、列数都是连续的,且相差地址是有规律的 下面是一个实例 #include<iostream&g…...
【蘑菇书EasyRL】强化学习,笔记整理
【蘑菇书EasyRL】强化学习,笔记整理 1.笔记整理1.1 学习和决策代码框架 2. 遇到的buggym 环境,新版本python无法使用env_specs envs.registry.all() 报错 蘑菇书的教程地址: https://datawhalechina.github.io/easy-rl/#/chapter1/chapter1?…...
尚硅谷谷粒商城项目笔记——三、安装docker【电脑CPU:AMD】
三、安装docker 注意: 因为电脑是AMD芯片,自己知识储备不够,无法保证和课程中用到的环境一样,所以环境都是自己根据适应硬件软件环境重新配置的,这里的虚拟机使用的是VMware。 首先关闭防火墙和安全策略 systemctl…...
【8-9月份唯一机械电气计算机主题的IEEE会议】第七届机电一体化与计算机技术工程国际学术会议(MCTE 2024,8月23-25)
由广东博士创新发展促进会、输变电装备技术全国重点实验室联合主办,重庆大学电气工程学院、AEIC学术交流中心协办的第七届机电一体化与计算机技术工程国际学术会议(MCTE 2024)将于2024年8月23-25日在中国广州隆重举行。 大会诚挚邀请您投递相…...
YOLOv8改进 | 主干网络 | 简单而优雅且有效的VanillaNet 【华为诺亚方舟】
秋招面试专栏推荐 :深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 💡💡💡本专栏所有程序均经过测试,可成功执行💡💡💡 专栏目录 :《YOLOv8改进有效涨点》专栏介绍 & 专栏目录 | 目前已有80+篇内容,内含各种Head检测头、损失函数Loss、…...
Tomcat高可用集群(实例详解)
一.环境准备 虚拟机的版本:VMware-workstation-full-15.5.6-16341506.exe系统镜像版本:CentOS-6.10-x86_64-bin-DVD1.iso,全新安装,桌面版,可上网系统内存大小:1GB系统硬盘大小:20GB连接工具版…...
搭建自己的金融数据源和量化分析平台(五):更新两市退市股票信息
在前面的股票列表设计中,我们有一个list_status字段,可能的值为L上市 D退市 P暂停上市。 由于股票可能会被退市,因此需要该字段来维护上市状态。 深市爬虫: # 读取深交所最新退市股票列表 def get_delisted_stock_list():cache_f…...
Redis复习总结
之前写的博客太杂,最近想把Redis的知识点再系统的过一遍,带着自己的理解使用简短的话把一些问题总结一下,尤其是开发中和面试中的高频问题,基础知识点参考–>Redis入门、Spring Cache,这篇不再赘述。 目录 基础简介;与Memcached的区别;为什么作为mysql缓存?如何保证R…...
基于JSP的医院挂号系统
你好,我是专注于医疗信息系统的计算机专业毕业生。如果您对医院挂号系统感兴趣或有相关需求,欢迎随时联系我。 开发语言:Java 数据库:MySQL 技术:JSP技术 工具:MyEclipse 系统展示 首页 管理员功能模…...
Chainlit快速实现AI对话应用1 分钟内实现聊天数据的持久化保存
概述 默认情况下,Chainlit 应用不会保留其生成的聊天和元素。即网页一刷新,所有的聊天记录,页面上的所有聊天记录都会消失。但是,存储和利用这些数据的能力可能是您的项目或组织的重要组成部分。 一旦启用,数据持久性…...
STM32DMA数据传输
我估计大多数人学这么久连听说都没听说过DMA,更不用提知道它是干嘛的。其实DMA的本质就是一个数据的搬运工。平常的时候当我们没有配置的时候,一直都是CPU在搬运数据,但是这个活又累又没有技术含量,所以DMA的重要性还是有的。 目…...
Python学习笔记50:游戏篇之外星人入侵(十一)
前言 本篇文章接着之前的内容,继续对游戏功能进行优化,主要是优化游戏状态以及对应的处理。 状态 一个游戏包含多种状态,这个状态是一个可以很复杂也可以很简单的内容。条件所限,我们这个游戏的状态就比较简单: 未…...
vue3踩坑问题记录
//vue3element-plus //1、placeholder换行显示 const startTxt ref() const contentText ref<any>() startTxt.value "请描述问题内容、例如:" historyData.prompt.forEach((el:any)>{contentText.value \n${el.question}}) <ElInputv-mo…...
Python 爬虫实战:Scrapy 框架详解与应用
🛠️ Scrapy 框架基本使用 Scrapy 是一个强大的 Python 爬虫框架,提供了用于提取和处理网页数据的功能。以下是 Scrapy 的基本使用步骤: 安装 Scrapy pip install scrapy创建 Scrapy 项目 scrapy startproject myproject这将生成一个基础…...
60 函数参数——关键参数
关键参数主要指调用函数时的参数传递方式,与函数定义无关。 通过关键参数可以按参数名字传递值,明确指定哪个值传递给哪个参数,实参顺序可以和形参顺序不一致,但不影响参数值的传递结果,避免了用户需要牢记参数位置和…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
面试高频问题
文章目录 🚀 消息队列核心技术揭秘:从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"?性能背后的秘密1.1 顺序写入与零拷贝:性能的双引擎1.2 分区并行:数据的"八车道高速公路"1.3 页缓存与批量处理…...
【免费数据】2005-2019年我国272个地级市的旅游竞争力多指标数据(33个指标)
旅游业是一个城市的重要产业构成。旅游竞争力是一个城市竞争力的重要构成部分。一个城市的旅游竞争力反映了其在旅游市场竞争中的比较优势。 今日我们分享的是2005-2019年我国272个地级市的旅游竞争力多指标数据!该数据集源自2025年4月发表于《地理学报》的论文成果…...
2025年低延迟业务DDoS防护全攻略:高可用架构与实战方案
一、延迟敏感行业面临的DDoS攻击新挑战 2025年,金融交易、实时竞技游戏、工业物联网等低延迟业务成为DDoS攻击的首要目标。攻击呈现三大特征: AI驱动的自适应攻击:攻击流量模拟真实用户行为,差异率低至0.5%,传统规则引…...
