0
点赞
收藏
分享

微信扫一扫

Vite HMR API


​import.meta​​ 是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息,比如说这个模块的 URL。

<script type="module">
console.log(import.meta) // {url: 'http://127.0.0.1:5500/dist/index.html?a=1'}
</script>

​import.meta​​​ 对象由一个关键字 “​​import​​​”,一个点符号和一个 ​​meta​​​ 属性名组成。通常情况下 “​​import.​​​” 是作为一个属性访问的上下文,但是在这里 “​​import​​” 不是一个真正的对象。

​import.meta​​ 对象是由 ECMAScript 实现的,它带有一个 null 的原型对象。这个对象可以扩展,并且它的属性都是可写,可配置和可枚举的。

HMR (Hot Module Replacement)

Pinia 支持热更新,所以你可以编辑你的 store,并直接在你的应用中与它们互动,而不需要重新加载页面,允许你保持当前的 state、并添加甚至删除 state、action 和 getter。

目前,只有 Vite 被官方支持,不过任何实现 ​​import.meta.hot​​​ 规范的构建工具都应该能正常工作。(例外的是,webpack 似乎使用的是 ​​import.meta.webpackHot​​​ 而不是 ​​import.meta.hot​​ ) 你只需要在任何 store 声明旁边添加这段代码。比方说,你有三个 store:auth.js、 cart.js 和 chat.js, 你必须在每个 store 声明后都添加(和调整)这段代码。

// auth.js
import { defineStore, acceptHMRUpdate } from 'pinia'

const useAuth = defineStore('auth', {
// 配置...
})

// 确保传递正确的 store 声明,本例中为 `useAuth`
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useAuth, import.meta.hot))
}

Vite HMR API

Vite 通过特殊的 ​​import.meta.hot​​ 对象暴露手动 HMR API。

必需的条件守卫

首先,请确保用一个条件语句守护所有 HMR API 的使用,这样代码就可以在生产环境中被 tree-shaking 优化:

if (import.meta.hot) {
// HMR 代码
}

hot.accept(cb)

要接收模块自身,应使用 ​​import.meta.hot.accept​​,参数为接收已更新模块的回调函数:

export const count = 1

if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
console.log('updated: count is now ', newModule.count)
})
}

“接受” 热更新的模块被认为是 HMR 边界。

请注意,Vite 的 HMR 实际上并不替换最初导入的模块:如果 HMR 边界模块从某个依赖重新导出其导入,则它应负责更新这些重新导出的模块(这些导出必须使用 let)。此外,从边界模块向上的导入者将不会收到更新。

这种简化的 HMR 实现对于大多数开发用例来说已经足够了,同时允许我们跳过生成代理模块的昂贵工作。

hot.accept(deps, cb)

模块也可以接受直接依赖项的更新,而无需重新加载自身:

import { foo } from './foo.js'

foo()

if (import.meta.hot) {
import.meta.hot.accept('./foo.js', (newFoo) => {
// 回调函数接收到更新后的'./foo.js' 模块
newFoo.foo()
})

// 也可以接受一个依赖模块的数组:
import.meta.hot.accept(
['./foo.js', './bar.js'],
([newFooModule, newBarModule]) => {
// 回调函数接收一个更新后模块的数组
}
)
}

hot.dispose(cb)

一个接收自身的模块或一个期望被其他模块接收的模块可以使用 hot.dispose 来清除任何由其更新副本产生的持久副作用:

function setupSideEffect() {}

setupSideEffect()

if (import.meta.hot) {
import.meta.hot.dispose((data) => {
// 清理副作用
})
}

hot.data

import.meta.hot.data 对象在同一个更新模块的不同实例之间持久化。它可以用于将信息从模块的前一个版本传递到下一个版本。

hot.decline()

调用 import.meta.hot.decline() 表示此模块不可热更新,如果在传播 HMR 更新时遇到此模块,浏览器应该执行完全重新加载。

hot.invalidate()

现在调用 import.meta.hot.invalidate() 只是重新加载页面。

hot.on(event, cb)

监听自定义 HMR 事件。


举报

相关推荐

0 条评论