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 = 1if (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 事件。

Vite HMR API相关推荐

vite hmr热更新
1.请确保用一个条件语句守护所有 HMR API 的使用,这样代码就可以在生产环境中被 tree-shaking 优化:if (import.meta.hot) {// HMR 代码}2.hmr相关a ...
Vite HMR原理解析
Vite HMR原理解析模块热替换(hot module replacement)的简称,指的是在应用运行的时候,不需要刷新页面就可以直接替换.增删模块.vite的热替换webpack的实现类似,都 ...
对于Vite HMR 热加载剩下的补充。
在上片有关vite的文章我分享了Vite 热加载中accept,dispose,invalidate等. 我会接着上篇接着讲. 1.data可以保存数据,就继续接着上个计时器的例子将,我们会发现清除数 ...
Vite-babysitter 像月嫂？保姆？照顾孩子一般为你讲解Vite源码。
前言该项目如名,像月嫂?保姆?照顾孩子一般为你讲解Vite源码. NPM 依赖解析和预构建: 全面提升页面重载速度和强缓存依赖. Plugins 插件:可以利用 Rollup 插件的强大生态系统,同 ...
[译]Vue官方成员：Vite生态发展的怎么样了
前言之前 Vite2 刚出来的时候,恰好我要负责一个新项目,所以我打算用最新的 Vite + Vue3 + TS 来构建这个项目. 不幸的是,那时候 Vite 有坑,热更新做的也不如传统 webpa ...
Vite（三）部署静态站点（wordpress与hugo与Vercel、CI/CD、Travis CI、GitLab CI）、环境变量与模式、服务端渲染（SSR）
Vite(三)部署静态站点(wordpress与hugo与Vercel.CI/CD.Travis CI.GitLab CI).环境变量与模式.服务端渲染(SSR) 文章目录 Vite(三)部署静态站点 ...
Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗？
本文完整版:<Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗> Vite 与 Vue Cli 对比一.Vite 与 Vue CLI 是什么? Vu ...
Esbuild Bundler HMR
Esbuild 虽然 bundler 非常快,但是其没有提供 HMR 的能力,在开发过程中只能采用 live-reload 的方案,一有代码改动,页面就需要全量 reload ,这极大降低开发体验.为 ...
Vite（四）后端集成、比较Snowpack、从 v1 迁移、Awesome Vite.js
Vite(四)后端集成.比较Snowpack.从 v1 迁移.Awesome Vite.js 文章目录 Vite(四)后端集成.比较Snowpack.从 v1 迁移.Awesome Vite.js 1 ...

Vite HMR API

HMR (Hot Module Replacement)

Vite HMR API

Vite HMR API相关推荐

最新文章

热门文章