import 에서 사용할 별칭을 지정할 수 있다.
nodejs의 package.json의 exports 와 비슷하네.
사용하는 것에 대해서
-----------=-----------
import { name as squareName, draw } from "./modules/shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";
=>
<script type="importmap">
{
"imports": {
"square": "./module/shapes/square.js",
"circle": "https://example.com/shapes/circle.js" ,
"shapes/": "./module/shapes/",
"modules/square": "./module/src/other/shapes/square.js",
...
},
"scopes": {
"/modules/custom-shapes/": {
"square": "https://example.com/modules/shapes/square.js"
}
}
}
</script>
import { name as squareName, draw } from "square";
import { name as circleName } from "circle";
import { name as circleName } from "shapes/circle.js";
import { name as circleName } from "modules/square";
=>
"square" 를 지정하면 "./module/shapes/square.js" 가 된다.
"circle"를 지정하면 "https://example.com/shapes/circle.js" 가 된다.
"shapes/" 의 경로가 포함되면 "./module/shapes/" 로 대체하여 가져온다. (지정시 끝이 / 로 끝나면 폴더로 본다.)
"modules/square" 처럼 끝이 / 가 없으면 중간에 /가 있어라도 경로가 아니라 파일("./module/src/other/shapes/square.js")을 지칭한다.
import { name as squareName, draw } from "square"; -> imports 에 지정된 "./module/shapes/square.js" 를 가져온다.
import { name as squareName, draw } from "/modules/custom-shapes/square"; -> scopes 에 경로가 포함되어있으므로 "https://example.com/modules/shapes/square.js" 를 가져온다
scopes 를 체크하는 기준
1. scopes 에서 찾음
1.1. 경로 매칭이 긴 것이 우선이 됨.
2. scopes 에서 경로가 없으면 imports 에서 찾음.
scopes 사용 이유는 대충...
같은 모듈이지만 버전 차이 등에 대응
-------------=----------------
이 동작은 js 파일속 import 에도 영향을 미친다.
