websitebuildersnow
[ad_1]
With the recent addition of import map support in Safari 16.4, JavaScript developers can now use import maps in all modern browsers. Older browsers can use polyfills. Import maps improve module resolution in JavaScript applications.
Import maps allow you to resolve module specifiers in an ad-hoc manner. Import maps allow developers to separate module dependency references from their location (on disk or on a remote server). Developers can import dependencies using bare-her module specifiers, e.g. lodash of import { pluck } from "lodash";). Dedicated tools can handle the mapping between dependencies and their locations without touching application code.
As an immediate result of cross-browser support, JSPM CLI was relaunched a few days ago as an import map package management tool. For example, JSPM CLI automatically prints the following import map: lit library:
<script type="importmap">
{
"imports": {
"lit": "https://ga.jspm.io/npm:lit@2.7.0/index.js"
},
"scopes": {
"https://ga.jspm.io/": {
"@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@1.6.1/reactive-element.js",
"lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@3.3.0/lit-element.js",
"lit-html": "https://ga.jspm.io/npm:lit-html@2.7.0/lit-html.js",
"lit-html/is-server.js": "https://ga.jspm.io/npm:lit-html@2.7.0/is-server.js"
}
}
}
</script>
Guy Bedford, core open source contributor to the JSPM CLI and maintainer of the import map polyfill, explained how import maps can improve the tools and developer experience when using JavaScript modules. .
Respect for the Japan Society for the Promotion of Science
package.jsonIt has a version range and supports all features of Node.js module resolution in a browser-compatible way. Just add and support any module URL and CDN provider.--provider unpkginstall command (or even locallynode_modulesmapping via--provider nodemodules).
Better apps are created when there are fewer steps between the developer and their tools, between development and operations, and between the application and the end user.
Alternatively, the developer can provide the import maps manually, possibly eliminating the need for build tools.lit team provide such a use case on Twitter (see Online Playground). 1 of his Twitter users commented:
A frontend that doesn’t require npm to be installed is something I’ve dreamed of for years.
The WhatWG specification for import maps requires two fields (imports and scopes) passed as a JSON object.next import map
{
"imports": {
"a": "/a-1.mjs",
"b": "/b-1.mjs",
"c": "/c-1.mjs"
},
"scopes": {
"/scope2/": {
"a": "/a-2.mjs"
},
"/scope2/scope3/": {
"b": "/b-3.mjs"
}
}
}
would result in the following module resolution (using relative URLs for brevity):
The previous table shows that the script (referrer) is /scope2/scope3 import the code from the module a (specifier), that module is loaded from /a-2.mjs position.Because there is no map configured under the scope /scope2/scope3 for modules athe resolution algorithm uses the closest available (i.e. /scope2).
The import map is contained in an HTML file and <script type="importmap"> tags <head> Documentation section:
<!doctype html>
<script type="importmap">
... JSON import map here
</script>
old browsers profit from es-module-shims PolyfillYou can detect import map support in your browser like this:
if (HTMLScriptElement.supports('importmap')) {
Developers can refer to the full import map specification for additional technical details.
[ad_2]
Source link
GIPHY App Key not set. Please check settings