์๋ ํ์ธ์!
์ด ํ๋ฅญํ ๋์๊ด์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค!
๊ทธ๋ฌ๋ ํจํค์ง ๋งค๋ํ์คํธ ( package.json
ํ์ผ)์ "module"
ํ๋๊ฐ ESM ๋ฒ๋ค (์ : ./src/moment.js
)์ ๊ฐ๋ฆฌ์ผ ์ผํ๋ค๊ณ ์๊ฐํฉ๋๋ค.
ESM (Webpack, Rollup ๋ฐ ๊ธฐํ)์ ์ง์ํ๋ ๋ฒ ๋ค๋ฌ๋ ์ต์ ์ต์ ํ ๊ธฐ์ (์ : ํธ๋ฆฌ ํ๋ค๊ธฐ)์ ์ฌ์ฉํ๊ธฐ ์ํด module
ํ๋๋ฅผ ์ฌ์ฉํ์ฌ ESM ๋ฒ๋ค์ ์ฐพ์ ์ ์์ด์ผํฉ๋๋ค. ํ์ฌ๋ ./moment.js
UMD ๋ฒ๋ค์ด ๋์ ์ฌ์ฉ๋ฉ๋๋ค.
์ด๋ก ์ธํด ๋จ์ผ ์ฌ๋ณผ์ ๊ฐ์ ธ ์ค๋๋ผ๋ ์ ์ฒด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ESM ์ฌ์ฉ ํ๋ก์ ํธ์๋ก๋๋ฉ๋๋ค.
์๋ฅผ ๋ค์ด, ๋ค์๊ณผ ๊ฐ์ ๊ฐ์ ธ ์ค๊ธฐ :
import { isMoment } from 'moment';
๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ๋ชจ๋ ๊ฒ์ ๊ฐ์ ธ ์ค์ง๋ง ํ๋์ ํจ์ ๋ง ์์ฒญ๋์์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ import { isMoment } from 'moment/src/moment';
๋ฅผ TypeScript ํ๋ก์ ํธ์์ ํด๊ฒฐ ๋ฐฉ๋ฒ์ผ๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค. ์
๋ ฅ์ด ์ค๋จ๋๊ธฐ ๋๋ฌธ์
๋๋ค.
./src/moment.js
์ ๋ด์ฉ์ ์ดํด๋ณธ ํ ์ ๋ง์ ๋์ฐพ๊ณ ์์ต๋๋ค. ๋ด์ฉ์ ESM ๊ด์ ์์ ์๋ฏธ๊ฐ ์์ต๋๋ค. Moment
, isMoment
๋ฑ๊ณผ ๊ฐ์ ์ ์ฉํ ๊ธฐํธ๋ฅผ ๊ฐ์ ธ์ค๊ณ ๋ค์ ๋ด๋ณด๋ด๋ ๋์ ๊ฐ์ฒด๋ฅผ ๊ตฌ์ฑํ๊ณ ๋ด ๋ณด๋
๋๋ค. UMD ๋ฒ๋ค์ ์ง์
์ ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
์ต์ ๋๊ตฌ๊ฐ ์๋ํ๋ ค๋ฉด ๋ชจ๋ ์ ์ฉํ ๊ธฐํธ๋ฅผ ๊ฐ๋ณ์ ์ผ๋ก ๋ด๋ณด๋ด๋ ์ ์ ํ ESM ๋ฒ๋ค์ด ํ์ํฉ๋๋ค.
์ด ๋ฐฉ๋ฒ์ผ๋ก ํ์ํ ๊ธฐํธ๋ฅผ (moment.js์ ์ ์ฒด ๋ฒ๋ค์๋ก๋ํ์ง ์๊ณ ) ๊ฐ์ ธ์ฌ ์์์์ต๋๋ค.
// @ts-ignore
import { isMoment, Moment } from 'moment/src/lib/moment/constructor';
๊ทธ๋ฌ๋ @ts-ignore
๋ฅผ ์ฌ์ฉํ์ฌ ์
๋ ฅ ์ค๋ฅ๋ฅผ ์ต์ ํด์ผํ๋ฏ๋ก ๊ฐ์ ธ ์ค๊ธฐ๊ฐ ํ์ฉ๋์ง๋ง ๊ฐ์ ธ์จ ๊ธฐํธ์ ๋ํ ๋ชจ๋ ์
๋ ฅ์ด ์ค๋จ๋ฉ๋๋ค. ๋ํ ๊ฒฝ๋ก๊ฐ๋ณด๊ธฐ ํํ๊ณ ์ต์ข
์ฌ์ฉ์๊ฐ ์ฌ์ฉํด์๋ ์๋ฉ๋๋ค (์บก์ํ๊ฐ ๊นจ์ง๊ธฐ ๋๋ฌธ์).
๋ฐฉ๊ธ ์คํ์ํ์ต๋๋ค. ๋ค์ ๋ด์ฉ์ผ๋ก ํจํค์ง ๋ฃจํธ์ moment.esm.js
๋ผ๋ ํ์ผ์ ๋ง๋ค์์ต๋๋ค.
export { isMoment, Moment } from './src/lib/moment/constructor';
๊ทธ๋ฆฌ๊ณ ํจํค์ง ๋งค๋ํ์คํธ์์ ๊ฐ๋ฆฌ ํค๋๋ก module
ํ๋๋ฅผ ์ถ๊ฐํ์ต๋๋ค.
๊ทธ๋ฐ ๋ค์ ์์ฉ ํ๋ก๊ทธ๋จ์์ ๊ฐ์ ธ ์์ต๋๋ค.
import { isMoment, Moment } from 'moment';
์์๋๋ก ์๋ํ๋ ํ์ดํ ์ ์ธ์ผ๋ก ์ฌ๋ฐ๋ฅด๊ฒ ๊ฐ์ ธ ์์ผ๋ฉฐ Webpack ๋ฐ Rollup ๋น๋ ์ค์ ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ์ต๋๋ค. ๋ชจ๋ ๋ก์ผ์ผ์ด์๋ ์ ์ฒด ๋ฒ๋ค์๋ก๋ํ์ง ์๊ณ ์ง์ ๋ ๊ธฐํธ ๋ง ๊ฐ์ ธ ์์ต๋๋ค.
๋๋ ์ด๊ฒ์ด ๊ฐ ๊ธธ์ด๋ผ๊ณ ๋ฏฟ์ผ๋ฉฐ ์ ์ธ์ ์ค๋ช ๋ ๋ค๋ฅธ ๊ธฐํธ๋ฅผ ๋ด๋ณด๋ด๋๋ก ํ์ฅ ํ ์ ์์ต๋๋ค.
๋๋ ์ด๊ฒ์์ง์งํ๋ค.
https://momentjs.com/docs/#/ -project-status / ์ฐธ์กฐ
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
./src/moment.js
์ ๋ด์ฉ์ ์ดํด๋ณธ ํ ์ ๋ง์ ๋์ฐพ๊ณ ์์ต๋๋ค. ๋ด์ฉ์ ESM ๊ด์ ์์ ์๋ฏธ๊ฐ ์์ต๋๋ค.Moment
,isMoment
๋ฑ๊ณผ ๊ฐ์ ์ ์ฉํ ๊ธฐํธ๋ฅผ ๊ฐ์ ธ์ค๊ณ ๋ค์ ๋ด๋ณด๋ด๋ ๋์ ๊ฐ์ฒด๋ฅผ ๊ตฌ์ฑํ๊ณ ๋ด ๋ณด๋ ๋๋ค. UMD ๋ฒ๋ค์ ์ง์ ์ ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.์ต์ ๋๊ตฌ๊ฐ ์๋ํ๋ ค๋ฉด ๋ชจ๋ ์ ์ฉํ ๊ธฐํธ๋ฅผ ๊ฐ๋ณ์ ์ผ๋ก ๋ด๋ณด๋ด๋ ์ ์ ํ ESM ๋ฒ๋ค์ด ํ์ํฉ๋๋ค.
์ด ๋ฐฉ๋ฒ์ผ๋ก ํ์ํ ๊ธฐํธ๋ฅผ (moment.js์ ์ ์ฒด ๋ฒ๋ค์๋ก๋ํ์ง ์๊ณ ) ๊ฐ์ ธ์ฌ ์์์์ต๋๋ค.
๊ทธ๋ฌ๋
@ts-ignore
๋ฅผ ์ฌ์ฉํ์ฌ ์ ๋ ฅ ์ค๋ฅ๋ฅผ ์ต์ ํด์ผํ๋ฏ๋ก ๊ฐ์ ธ ์ค๊ธฐ๊ฐ ํ์ฉ๋์ง๋ง ๊ฐ์ ธ์จ ๊ธฐํธ์ ๋ํ ๋ชจ๋ ์ ๋ ฅ์ด ์ค๋จ๋ฉ๋๋ค. ๋ํ ๊ฒฝ๋ก๊ฐ๋ณด๊ธฐ ํํ๊ณ ์ต์ข ์ฌ์ฉ์๊ฐ ์ฌ์ฉํด์๋ ์๋ฉ๋๋ค (์บก์ํ๊ฐ ๊นจ์ง๊ธฐ ๋๋ฌธ์).๋ฐฉ๊ธ ์คํ์ํ์ต๋๋ค. ๋ค์ ๋ด์ฉ์ผ๋ก ํจํค์ง ๋ฃจํธ์
moment.esm.js
๋ผ๋ ํ์ผ์ ๋ง๋ค์์ต๋๋ค.๊ทธ๋ฆฌ๊ณ ํจํค์ง ๋งค๋ํ์คํธ์์ ๊ฐ๋ฆฌ ํค๋๋ก
module
ํ๋๋ฅผ ์ถ๊ฐํ์ต๋๋ค.๊ทธ๋ฐ ๋ค์ ์์ฉ ํ๋ก๊ทธ๋จ์์ ๊ฐ์ ธ ์์ต๋๋ค.
์์๋๋ก ์๋ํ๋ ํ์ดํ ์ ์ธ์ผ๋ก ์ฌ๋ฐ๋ฅด๊ฒ ๊ฐ์ ธ ์์ผ๋ฉฐ Webpack ๋ฐ Rollup ๋น๋ ์ค์ ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ์ต๋๋ค. ๋ชจ๋ ๋ก์ผ์ผ์ด์๋ ์ ์ฒด ๋ฒ๋ค์๋ก๋ํ์ง ์๊ณ ์ง์ ๋ ๊ธฐํธ ๋ง ๊ฐ์ ธ ์์ต๋๋ค.
๋๋ ์ด๊ฒ์ด ๊ฐ ๊ธธ์ด๋ผ๊ณ ๋ฏฟ์ผ๋ฉฐ ์ ์ธ์ ์ค๋ช ๋ ๋ค๋ฅธ ๊ธฐํธ๋ฅผ ๋ด๋ณด๋ด๋๋ก ํ์ฅ ํ ์ ์์ต๋๋ค.