Moment: ESM ์ธ์‹ ๋ฒˆ ๋“ค๋Ÿฌ์— ๋Œ€ํ•œ ์ง€์› ์ถ”๊ฐ€

์— ๋งŒ๋“  2019๋…„ 11์›” 12์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: moment/moment

์•ˆ๋…•ํ•˜์„ธ์š”!

์ด ํ›Œ๋ฅญํ•œ ๋„์„œ๊ด€์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค!

๊ทธ๋Ÿฌ๋‚˜ ํŒจํ‚ค์ง€ ๋งค๋‹ˆํŽ˜์ŠคํŠธ ( 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 ํ”„๋กœ์ ํŠธ์—์„œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ž…๋ ฅ์ด ์ค‘๋‹จ๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

BuilRelease Help Wanted

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

./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 ๋นŒ๋“œ ์ค‘์— ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ž‘๋™ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ๋กœ์ผ€์ผ์ด์žˆ๋Š” ์ „์ฒด ๋ฒˆ๋“ค์„๋กœ๋“œํ•˜์ง€ ์•Š๊ณ  ์ง€์ •๋œ ๊ธฐํ˜ธ ๋งŒ ๊ฐ€์ ธ ์™”์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ด๊ฒƒ์ด ๊ฐˆ ๊ธธ์ด๋ผ๊ณ  ๋ฏฟ์œผ๋ฉฐ ์„ ์–ธ์— ์„ค๋ช… ๋œ ๋‹ค๋ฅธ ๊ธฐํ˜ธ๋ฅผ ๋‚ด๋ณด๋‚ด๋„๋ก ํ™•์žฅ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

./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 / ์ฐธ์กฐ

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰