教你巧用 import.meta 实现热更新的问题
import.meta
import.meta 是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象，它包含了这个模块的信息。
import.meta 对象是由 ECMAScript 实现的，它带有一个 null 的原型对象。这个对象可以扩展，并且它的属性都是可写，可配置和可枚举的。
<script type="module">
console.log(import.meta) // {url: 'http://127.0.0.1:5500/dist/index.html?a=1'}
</script>它返回一个带有 url 属性的对象，指明模块的基本 URL。也可以是外部脚本的 URL，还可以是内联脚本所属文档的 URL。注意，url 也可能包含参数或者哈希（比如后缀?或#）
应用场景
import.meta.hot
Pinia 是 vuex 新替代方案。Pinia 中热更新实现，借助 import.meta。
import { defineStore, acceptHMRUpdate } from 'pinia'
const useAuth = defineStore('auth', {
// options...
})
// make sure to pass the right store definition, `useAuth` in this case.
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useAuth, import.meta.hot))
}
Vite 通过特殊的 import.meta.hot 对象暴露手动 HMR API。
https://github.com/vitejs/vite/blob/main/packages/vite/class="lazy" data-src/client/client.ts#L412
interface ImportMeta {
readonly hot?: {
readonly data: any
accept(): void
accept(cb: (mod: any) => void): void
accept(dep: string, cb: (mod: any) => void): void
accept(deps: string[], cb: (mods: any[]) => void): void
prune(cb: () => void): void
dispose(cb: (data: any) => void): void
decline(): void
invalidate(): void
on(event: string, cb: (...args: any[]) => void): void
}
}
vite HMR API：https://cn.vitejs.dev/guide/api-hmr.html
import.meta.webpackHot
module.hot 的一个别名，strict ESM 中可以使用 import.meta.webpackHot 但是不能使用 module.hot。
在 package.json 中设置
"type": "module"会强制 package.json 下的所有文件使用 ECMAScript 模块
vuex 借助 webpack 模块热替换：https://webpack.docschina.org/guides/hot-module-replacement/
vuex 提供 hotUpdate 方法：https://github.com/vuejs/vuex/blob/HEAD/class="lazy" data-src/store.js#L242-L243
if (import.meta.webpackHot) {
// 使 action 和 mutation 成为可热重载模块
import.meta.webpackHot.accept(['./mutations', './modules'], () => {
// 获取更新后的模块
// 因为 babel 6 的模块编译格式问题，这里需要加上 `.default`
const newMutations = require('./mutations').default
const newModules = require('./modules').default
// 加载新模块
store.hotUpdate({
mutations: newMutations,
modules: {
...newModules
}
})
})
}
URL()
URL() 构造函数返回一个新创建的 URL 对象，表示由一组参数定义的 URL。
const url = new URL(url [, base])
url是一个表示绝对或相对 URL 的 DOMString。如果url是相对 URL，则会将base用作基准 URL。如果url是绝对URL，则无论参数base是否存在，都将被忽略。base可选。是一个表示基准 URL 的 DOMString，在 url 是相对 URL 时，它才会起效。如果未指定，则默认为''。
二者结合使用
new URL('./relative-path', import.meta.url)
示例：获取图片
function loadImg (relativePath) {
const url = new URL(relativePath, import.meta.url)
const image = new Image()
image.class="lazy" data-src = url
return image
}
loadImg('../../images/1.jpg')
无需关心路径问题，自动根据当前 URL 进行转换。
到此这篇关于巧用 import.meta 实现热更新的文章就介绍到这了,更多相关import.meta热更新内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
