This is the 18th day of my participation in Gwen Challenge

Two days ago, WHEN I was using deno, I came across import-maps. When I checked it on the Internet, I found it was a proposal under WICG. It’s best to know the layout ahead of time for future proposals.

Take a look at import-maps

This is a fairly common instance of import-maps

{
  "imports": {
    "moment": "/node_modules/moment/src/moment.js"."lodash": "/node_modules/lodash-es/lodash.js"}}Copy the code

Once import-maps is configured, it can be used in a JS file by:

import moment from "/node_modules/moment/src/moment.js";
import { partition } from "/node_modules/lodash-es/lodash.js";
Copy the code

When you see this, it’s easy to think of NPM package.json, which is often used in development projects

{
  "dependencies": {
    "lodash": "^ 4.17.21"."moment": "^ 2.29.1"}}Copy the code

(The simplified part is above)

As you can see, import-maps and package.json can both map module functionality and simplify the cost of reference.

Why build two similar things? What are the similarities and differences between the two?

First, there is a trend to simplify the packaging tools and adapt most of the functionality to provide capabilities using browsers natively. By using native capabilities, it is cost-effective to save on the overhead of building the translation portion.

Import-maps is built on that. According to the official standard document:

Web developers with experience with pre-ES2015 module systems, such as CommonJS (either in Node or bundled using webpack/browserify for the browser), are used to being able to import modules using a simple syntax

Today, many web developers are even using JavaScript’s native module syntax, but combining it with bare import specifiers, thus making their code unable to run on the web without per-application, ahead-of-time modification. We’d like to solve that, and bring these benefits to the web.

Json has these advantages over NPM’s package.json:

  1. Allow the import identifier to be used directly in the browser, for example:
import moment from "moment"
Copy the code
  1. Provide a backstop solution, such as import $from “jquery”, he will first try to reference the library to the CDN, if the CDN fails can fall back to reference the local version.
{
  "imports": {
    "jquery": [
      "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"."/node_modules/jquery/dist/jquery.js"]}}Copy the code
  1. Enable polyfill for some built-in modules or other features.
{
  "imports": {
    "/node_modules/kvs-polyfill/index.mjs": [
      "std:kv-storage"."/node_modules/kvs-polyfill/index.mjs"]}}Copy the code
  1. Share import identifiers in Javascript Importing context or in traditional URL context such as Fetch (),<img src="">or<link href="">.
.back-button {
  background: url('import:widget/assets/back.svg');
}
Copy the code