์๊ฐ: NPM + Deno์ฉ ESM CDN
6353 ๋จ์ด webdevnpmdenojavascript
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 ๋ผ์ด์ ์ค์ ๋ฐ๋ผ ๋ผ์ด์ ์ค๊ฐ ๋ถ์ฌ๋ฉ๋๋ค.
Reference
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(์๊ฐ: NPM + Deno์ฉ ESM CDN), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://dev.to/ije/introducing-esm-cdn-for-npm-deno-1mpoํ ์คํธ๋ฅผ ์์ ๋กญ๊ฒ ๊ณต์ ํ๊ฑฐ๋ ๋ณต์ฌํ ์ ์์ต๋๋ค.ํ์ง๋ง ์ด ๋ฌธ์์ URL์ ์ฐธ์กฐ URL๋ก ๋จ๊ฒจ ๋์ญ์์ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค