怎么用import.meta實(shí)現(xiàn)熱更新

這篇“怎么用import.meta實(shí)現(xiàn)熱更新”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么用import.meta實(shí)現(xiàn)熱更新”文章吧。

import.meta

import.meta 是一個(gè)給 JavaScript 模塊暴露特定上下文的元數(shù)據(jù)屬性的對象，它包含了這個(gè)模塊的信息。

import.meta 對象是由 ECMAScript 實(shí)現(xiàn)的，它帶有一個(gè) null 的原型對象。這個(gè)對象可以擴(kuò)展，并且它的屬性都是可寫，可配置和可枚舉的。

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

它返回一個(gè)帶有 url 屬性的對象，指明模塊的基本 URL。也可以是外部腳本的 URL，還可以是內(nèi)聯(lián)腳本所屬文檔的 URL。注意，url 也可能包含參數(shù)或者哈希（比如后綴?或#）

應(yīng)用場景

import.meta.hot

Pinia 是 vuex 新替代方案。Pinia 中熱更新實(shí)現(xiàn)，借助 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 對象暴露手動(dòng) HMR API。

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
  }
}

import.meta.webpackHot

module.hot 的一個(gè)別名，strict ESM 中可以使用 import.meta.webpackHot 但是不能使用 module.hot。

在 package.json 中設(shè)置 "type": "module" 會(huì)強(qiáng)制 package.json 下的所有文件使用 ECMAScript 模塊

if (import.meta.webpackHot) {
  // 使 action 和 mutation 成為可熱重載模塊
  import.meta.webpackHot.accept(['./mutations', './modules'], () => {
    // 獲取更新后的模塊
    // 因?yàn)?nbsp;babel 6 的模塊編譯格式問題，這里需要加上 `.default`
    const newMutations = require('./mutations').default
    const newModules = require('./modules').default
    // 加載新模塊
    store.hotUpdate({
      mutations: newMutations,
      modules: {
        ...newModules
      }
    })
  })
}

URL()

URL() 構(gòu)造函數(shù)返回一個(gè)新創(chuàng)建的 URL 對象，表示由一組參數(shù)定義的 URL。

const url = new URL(url [, base])

• url 是一個(gè)表示絕對或相對 URL 的 DOMString。如果url 是相對 URL，則會(huì)將 base 用作基準(zhǔn) URL。如果 url 是絕對URL，則無論參數(shù)base是否存在，都將被忽略。

• base 可選。是一個(gè)表示基準(zhǔn) URL 的 DOMString，在 url 是相對 URL 時(shí)，它才會(huì)起效。如果未指定，則默認(rèn)為 ''。

二者結(jié)合使用

new URL('./relative-path', import.meta.url)

示例：獲取圖片

function loadImg (relativePath) {
  const url = new URL(relativePath, import.meta.url)
  const image = new Image()
  image.src = url
  return image
}
loadImg('../../images/1.jpg')

無需關(guān)心路徑問題，自動(dòng)根據(jù)當(dāng)前 URL 進(jìn)行轉(zhuǎn)換。

以上就是關(guān)于“怎么用import.meta實(shí)現(xiàn)熱更新”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。