教你巧用 import.meta 實現熱更新的問題

2022-04-16 13:00:33

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

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/src/store.js

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.src = url
  return image
}
loadImg('../../images/1.jpg')

無需關心路徑問題，自動根據當前 URL 進行轉換。

到此這篇關於巧用 import.meta 實現熱更新的文章就介紹到這了,更多相關import.meta熱更新內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

教你巧用 import.meta 實現熱更新的問題

目錄

import.meta

應用場景

URL()

二者結合使用

熱門文章