巧用 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/src/client/client.ts#L412
interface ImportMeta {readonly hot?: {readonly data: anyaccept(): voidaccept(cb: (mod: any) => void): voidaccept(dep: string, cb: (mod: any) => void): voidaccept(deps: string[], cb: (mods: any[]) => void): voidprune(cb: () => void): voiddispose(cb: (data: any) => void): voiddecline(): voidinvalidate(): voidon(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/src/store.js#L242-L243
if (import.meta.webpackHot) {// 使 action 和 mutation 成为可热重载模块import.meta.webpackHot.accept(['./mutations', './modules'], () => {// 获取更新后的模块// 因为 babel 6 的模块编译格式问题,这里需要加上 `.default`const newMutations = require('./mutations').defaultconst 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.src = urlreturn image
}
loadImg('../../images/1.jpg')
无需关心路径问题,自动根据当前 URL 进行转换。
巧用 import.meta 实现热更新相关推荐
- 深入解析 Vue 的热更新原理,尤大是如何巧用源码中的细节?
大家都用过 Vue-CLI 创建 vue 应用,在开发的时候我们修改了 vue 文件,保存了文件,浏览器上就自动更新出我们写的组件内容,非常的顺滑流畅,大大提高了开发效率.想知道这背后是怎么实现的吗, ...
- 零代码变更,巧用 Reloader 快速实现 Kubernetes 的 Configmap 和 Secret 热更新
公众号关注 「奇妙的 Linux 世界」 设为「星标」,每天带你玩转 Linux ! 1背景 1.1 配置中心问题 在云原生中配置中心,例如:Configmap和Secret对象,虽然可以进行直接更新 ...
- webpack学习之路(四)webpack-hot-middleware实现热更新
上一节我学习了webpack-dev-middleware,但是单独使用它并没有实现热更新,所以这节我要学习搭配使用webpack-hot-middleware,来实现热更新功能. 创建项目 我们依然 ...
- Parcel React 开发服务器热更新实战
parcel Parcel 是 Web 应用打包工具,适用于经验不同的开发者.它利用多核处理提供了极快的速度,并且不需要任何配置. 内容 官网教程没有实现devSever和动态更新相结合具体部署步骤. ...
- React Native 热更新方案
转载: https://blog.csdn.net/xiangzhihong8/article/details/73201421 随着 React Native 的不断发展完善,越来越多的公司选择使用 ...
- vite hmr热更新
1.请确保用一个条件语句守护所有 HMR API 的使用,这样代码就可以在生产环境中被 tree-shaking 优化:if (import.meta.hot) {// HMR 代码}2.hmr相关a ...
- 简单实现Vite的HRM热更新 ———《第二篇热更新上》
- 热更新过程 在server端发现了文件更新,推送一个事件到浏览器前端,浏览器知道文件更新了,重新请求这个新的模块,去替换老的模块. - 操作过程 首先npm init @vitejs/app 选择 ...
- 0基础快速入门WebPack(3)——图解详述plugins(插件)的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等(附详细案例源码解析过程及版本迭代过程)
文章目录 1. 重点提炼 2. 配置环境 3. Plugins(插件) 3.1 HtmlWebpackPlugin 3.1.1 example01 3.1.1.1 example01-1 3.1.1. ...
- reactnative热更新 react-native-pushy
在开讲前先介绍另外一种方法也可以进行代码的热更新,利用codepush大家可以参考这篇文章: 博客地址 快速入门-准备工作 首先你应该有一个基于React Native开发的应用,我们把具有packa ...
- [深入剖析React Native]热更新之react-native-pushy使用指南(Android)
本文使用RN版本:0.33.0 react-native-pushy是ReactNative中文网推出的代码热更新服务,github地址:https://github.com/reactnativec ...
最新文章
- TrayIcon 类 添加系统托盘不显示托盘图标
- 分布式系统中一些主要的副本更新策略——Dynamo/Cassandra/Riak同时采取了主从式更新的同步+异步类型,以及任意节点更新的策略。...
- .net网络编程之一:Socket编程
- [SCOI2007]最大土地面积
- .Net中DataTable的保存
- JS中的prototype、__proto__与constructor(图解)
- 马化腾联手10余位科学家发起科学探索奖,腾讯基金投入10亿元启动资金
- 老张 .NetCore与Vue 框架学习
- HBase出现java.lang.NoClassDefFoundError: org/apache/hadoop/hbase/HBaseConfiguration问题
- SpringBoot2.0 整合 SpringSecurity 框架,实现用户权限安全管理
- MyBatis框架笔记02:接口方式使用MyBatis
- 监控进程网络使用情况--NetHogs
- 我在外包的日子35:二期上线
- 生成验证码的一段源代码
- c语言课设代写一般多少钱_海南彩礼钱一般给多少 海南娶媳妇要多少钱
- md5修改器v1.0
- win10设置计算机关机时间,w10怎么设置自动关机_win10电脑设置自动关机的方法
- 云服务器防 DDoS 攻击的几种方法策略分享
- RF01 RF环境搭建及简介
- session-based recommendation的两个模型对比NARM, STAMP