์†Œ๊ฐœ: NPM + Deno์šฉ ESM CDN

6353 ๋‹จ์–ด webdevnpmdenojavascript
์•ˆ๋…•ํ•˜์„ธ์š”. ES ๋ชจ๋“ˆ์„ ์œ„ํ•œ ๋น ๋ฅธ ๊ธ€๋กœ๋ฒŒ ์ฝ˜ํ…์ธ  ์ „์†ก ๋„คํŠธ์›Œํฌ์ธ esm.sh์„ ์†Œ๊ฐœํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ๋ชจ๋“ˆ์€ esbuild์—์„œ npm์— ์˜ํ•ด ESM์œผ๋กœ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค.

Skypack ๋ฐ jspm ๊ณผ ๋‹ฌ๋ฆฌ esm.sh๋Š” ๊ฐ ํŒจํ‚ค์ง€์— ๋Œ€ํ•œ ๋ชจ๋“  ์ข…์†์„ฑ(peerDependencies ์ œ์™ธ)์„ ๋ฒˆ๋“ค๋กœ ๋ฌถ์–ด ๋” ๋‚˜์€ ๋กœ๋”ฉ ์†๋„๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

esm.sh๋Š” cloudflare์„ gloabl CDN์œผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

URL์—์„œ ๊ฐ€์ ธ์˜ค๊ธฐ




import React from 'https://esm.sh/react'


๋ฒ„์ „ ์ง€์ •




import React from 'https://esm.sh/react@17.0.1'


์„œ๋ธŒ๋ชจ๋“ˆ




import { renderToString } from 'https://esm.sh/react-dom/server'


๋˜๋Š” ์ผ๋ฐ˜ ํŒŒ์ผ ๊ฐ€์ ธ์˜ค๊ธฐ:

import 'https://esm.sh/tailwindcss/dist/tailwind.min.css'


๊ฐœ๋ฐœ ๋ชจ๋“œ




import React from 'https://esm.sh/react?dev'


๋ฒˆ๋“ค ๋ชจ๋“œ




import React from 'https://esm.sh/[react,react-dom,swr]/react'
import ReactDom from 'https://esm.sh/[react,react-dom,swr]/react-dom'


๋˜๋Š” import-map.json ( import-maps proposal )์—์„œ ๋ฒˆ๋“ค ๋ชฉ๋ก์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

{
    "imports": {
        "https://esm.sh/": "https://esm.sh/[react,react-dom,swr]/",
        ...
    }
}



import React from 'https://esm.sh/react' // actual from 'https://esm.sh/[react,react-dom,swr]/react'


โš ๏ธ URL์˜ ๋ฌถ์Œ ํŒจํ‚ค์ง€๋Š” ์ตœ๋Œ€ 10๊ฐœ๊นŒ์ง€ ์ œํ•œ๋˜์–ด ์žˆ์œผ๋ฉฐ, ๋” ๋งŽ์€ ํŒจํ‚ค์ง€๋ฅผ ๋ฌถ์œผ๋ ค๋ฉด esm ํด๋ผ์ด์–ธํŠธ(WIP)๋ฅผ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค.

๋ฐ๋…ธ ํ˜ธํ™˜์„ฑ



esm.sh๋Š” ๋…ธ๋“œ ๋‚ด๋ถ€ ๋ชจ๋“ˆ(fs, os ๋“ฑ)์„ https://deno.land/std/node ์œผ๋กœ ํด๋ฆฌํ•„ํ•˜์—ฌ postcss์™€ ๊ฐ™์ด Deno์—์„œ ์ž‘๋™ํ•˜๋Š” ์ผ๋ถ€ ๋ชจ๋“ˆ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

import postcss from 'https://esm.sh/postcss'
import autoprefixer from 'https://esm.sh/autoprefixer'

const css = (await postcss([ autoprefixer]).process(`
    backdrop-filter: blur(5px);
    user-select: none;
`).async()).content


X-Typescript-์œ ํ˜•



๊ธฐ๋ณธ์ ์œผ๋กœ esm.sh๋Š” deno ์œ ํ˜• ๊ฒ€์‚ฌ(link)์— ์œ ์šฉํ•œ ์œ ํ˜•(dts)์ด ์ •์˜๋œ ๊ฒฝ์šฐ X-TypeScript-Types์˜ ์‚ฌ์šฉ์ž ์ง€์ • HTTP ํ—ค๋”์— ์‘๋‹ตํ•ฉ๋‹ˆ๋‹ค.



์ผ๋ถ€ ์œ ํ˜•์ด ์˜ฌ๋ฐ”๋ฅด์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— no-check ์ฟผ๋ฆฌ๋ฅผ ์ „๋‹ฌํ•˜์—ฌ types ํ—ค๋”๋ฅผ ๋น„ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

import unescape from 'https://esm.sh/lodash/unescape?no-check'


๋” ๋งŽ์€ ์šฉ๋„



ํ™•์ธํ•ด์ฃผ์„ธ์š”https://esm.sh

์˜คํ”ˆ ์†Œ์Šค



esm.sh๋Š” MIT ๋ผ์ด์„ ์Šค์— ๋”ฐ๋ผ ๋ผ์ด์„ ์Šค๊ฐ€ ๋ถ€์—ฌ๋ฉ๋‹ˆ๋‹ค.

https://github.com/postui/esm.sh

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ