Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to use import.meta to achieve hot update", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use import.meta to achieve hot update" article.

Import.meta

Import.meta is an object that exposes the metadata properties of a specific context to a JavaScript module, and it contains information about the module.

This object is extensible, and its properties are writable, configurable, and enumerable.

Console.log (import.meta) / / {url: 'http://127.0.0.1:5500/dist/index.html?a=1'}

It returns an object with the url attribute indicating the basic URL of the module. It can also be the URL of an external script or the URL of the document to which the inline script belongs. Note that url may also contain parameters or hashes (such as suffixes? Or #)

Application scenario

Import.meta.hot

Pinia is a new alternative to vuex. Hot update in Pinia, with the help of 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 exposes manual HMR API through a special import.meta.hot object.

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

An alias for module.hot. You can use import.meta.webpackHot but not module.hot in strict ESM.

Setting "type" in package.json: "module" forces all files under package.json to use the ECMAScript module

If (import.meta.webpackHot) {/ / make action and mutation hot reloadable modules import.meta.webpackHot.accept (['. / mutations','. / modules'], () = > {/ / get the updated module / / because of the module compilation format of babel 6 You need to add `.default` const newMutations = require ('. / mutations'). Default const newModules = require ('. / modules'). Default / / load the new module store.hotUpdate ({mutations: newMutations, modules: {... newModules}})} URL ()

The URL () constructor returns a newly created URL object that represents the URL defined by a set of parameters.

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

Base is optional. Is a DOMString that represents the benchmark URL, which only works when the url is relative to URL. If not specified, the default is''.

Use new URL ('. / relative-path', import.meta.url) in combination with both

Example: get a picture

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

Do not care about the path problem, automatically convert according to the current URL.

The above is about "how to use import.meta to achieve hot update" this article content, I believe we all have a certain understanding, I hope the editor to share the content to help you, if you want to know more related knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.