做网站的windowlcd,做铝材哪些网站招聘,关于做甜品的网站,佛山做网站开发一. 解析 开发者使用一个模块时#xff0c;有时需要知道模板本身的一些信息#xff08;比如模块的路径#xff09;。现在有一个提案#xff0c;为 import 命令添加了一个元属性 import.meta#xff0c;返回当前模块的元信息。 import.meta只能在模块内部使用#xff0c;如…一. 解析 开发者使用一个模块时有时需要知道模板本身的一些信息比如模块的路径。现在有一个提案为 import 命令添加了一个元属性 import.meta返回当前模块的元信息。 import.meta只能在模块内部使用如果在模块外部使用会报错。 这个属性返回一个对象该对象的各种属性就是当前运行的脚本的元信息。具体包含哪些属性标准没有规定由各个运行环境自行决定。一般来说import.meta至少会有下面两个属性。
1import.meta.url
import.meta.url返回当前模块的 URL 路径。举例来说当前模块主文件的路径是https://foo.com/main.jsimport.meta.url就返回这个路径。如果模块里面还有一个数据文件data.txt那么就可以用下面的代码获取这个数据文件的路径。
new URL(data.txt, import.meta.url)
注意Node.js 环境中import.meta.url返回的总是本地路径即是file:URL协议的字符串比如file:///home/user/foo.js。
2import.meta.scriptElement
import.meta.scriptElement是浏览器特有的元属性返回加载模块的那个script元素相当于document.currentScript属性。
// HTML 代码为
// script typemodule srcmy-module.js data-fooabc/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: Recordstring, any import.meta.glob([./modules/**/*.ts], { eager: true })模式字符串 ./modules/**/!(result).ts 解析如下
./modules/表示要匹配的文件路径的起始部分**/表示可以匹配任意多层子目录!(result)表示排除匹配到的文件名为result的文件.ts表示文件扩展名为.ts{ eager: true }参数表示立即加载这些模块
