Moment: ๋ชจ๋“ˆ์„ ์ฐพ์„ ์ˆ˜ ์—†์Œ: ์˜ค๋ฅ˜: Webpack ๋ฐ TypeScript๋กœ '../moment'๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

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

๋ฒ„๊ทธ ์„ค๋ช…

Webpack์œผ๋กœ TypeScript ์•ฑ์„ ์ปดํŒŒ์ผํ•˜๋ ค๊ณ  ํ•˜๋ฉด ๊ฐ ๋กœ์ผ€์ผ์— ๋Œ€ํ•ด '../moment'๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์—†๋‹ค๋Š” ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

์ด ์˜ค๋ฅ˜๋Š” ๋‹ค๋ฅธ ๋ชจ๋“  ๋กœ์ผ€์ผ์— ๋Œ€ํ•ด ๋ฐ˜๋ณต๋ฉ๋‹ˆ๋‹ค.

ERROR in ./node_modules/moment/locale/km.js
Module not found: Error: Can't resolve '../moment' in 'C:\PROGS\dev\var\private\moment-test\node_modules\moment\locale'
 @ ./node_modules/moment/locale/km.js 5:50-70
 @ ./node_modules/moment/locale sync ^\.\/.*$
 @ ./node_modules/moment/moment.js
 @ ./src/app.ts

์žฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด

src/app.ts

import * as moment from "moment";
console.log(moment().format("YYYY"));

ํŒจํ‚ค์ง€.json

{
    "private": true,
    "dependencies": {
        "moment": "2.23.0"
    },
    "devDependencies": {
        "awesome-typescript-loader": "5.2.1",
        "typescript": "3.2.2",
        "webpack": "4.28.3",
        "webpack-cli": "3.2.1"
    }
}

tsconfig.json

{ "include": [ "./src/" ] }

์›นํŒฉ.config.js

module.exports = {
    entry: "./src/app.ts",
    output: { filename: "bundle.js" },
    resolve: { extensions: [".ts"] },
    module: { rules: [ { test: /\.ts$/, use: { loader: "awesome-typescript-loader" } } ] }
}

์˜ˆ์ƒ๋˜๋Š” ํ–‰๋™

yarn run webpack -p ๋Š” ์˜ค๋ฅ˜ ์—†์ด ์ž‘๋™ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ˆœ๊ฐ„๋ณ„ ํ™˜๊ฒฝ

  • ์œˆ๋„์šฐ 10
  • ๋…ธ๋“œ 10.15.0
  • ์ˆœ๊ฐ„ 2.23.0
  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ 3.2.2
  • ์›นํŒฉ 4.28.3
  • ์‹œ๊ฐ„๋Œ€: CET(UTC+1)

ํ™˜๊ฒฝ์—์„œ ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๊ณ  ์ถœ๋ ฅ์„ ํฌํ•จํ•˜์‹ญ์‹œ์˜ค.

console.log((new Date()).toString())
console.log((new Date()).toLocaleString())
console.log((new Date()).getTimezoneOffset())
console.log(navigator.userAgent)
console.log(moment.version)

์ด ์ฝ”๋“œ๋Š” ๋™์ผํ•œ ์˜ค๋ฅ˜๋กœ ์‹คํŒจํ•ฉ๋‹ˆ๋‹ค!

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

๋‚˜๋Š” ๊ฐ™์€ ๋ฌธ์ œ์— ์ง๋ฉดํ–ˆ๊ณ  ์—ฌ๊ธฐ์— ๋ฌธ์ œ๊ฐ€์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

  • package.json ํŒŒ์ผ์— ๋ฐฉ๊ธˆ ์ถ”๊ฐ€๋œ npm i --save react-moment ์‚ฌ์šฉ์ž ์ง€์ • ๋ช…๋ น์„ ์‚ฌ์šฉํ•˜์—ฌ ์„ค์น˜ํ–ˆ์ง€๋งŒ node_modules์—๋Š” lib๊ฐ€ ์—†์—ˆ์œผ๋ฏ€๋กœ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.
  • npm install --save moment react-moment
  • ์ด์ œ ์˜ˆ์ƒ๋Œ€๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

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

์ด ์š”์ฒญ์„ ์—ด์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.
์ด๊ฒƒ์€ ์Šคํƒ ์˜ค๋ฒ„ํ”Œ๋กœ์— ๋Œ€ํ•œ ํ›Œ๋ฅญํ•œ ์งˆ๋ฌธ์ž…๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ๋ฒ„๊ทธ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์Šต๋‹ˆ๊นŒ? ์Šคํƒ ์˜ค๋ฒ„ํ”Œ๋กœ๋Š” ์งˆ๋ฌธ์— ์ ํ•ฉํ•˜์ง€๋งŒ ์•„๋ฌด๋„ ๊ฑฐ๊ธฐ์—์„œ ๋ฒ„๊ทธ๋ฅผ ์ˆ˜์ •ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊ท€ํ•˜์˜ ๋‹ต๋ณ€์€ TypeScript๋กœ WebPack์„ ์ง€์›ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์˜๋ฏธ๋กœ ํ•ด์„๋ฉ๋‹ˆ๋‹ค. ๋„ˆ๋ฌด ๋‚˜๋น !

Webpack ๋ฐ TypeScript์™€ ํ•จ๊ป˜ Moment๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ๋‹ค์–‘ํ•œ ์ž์Šต์„œ๊ฐ€ ์ธํ„ฐ๋„ท์— ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ํ•จ๊ป˜ ์ž˜ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋” ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ์ด ๋ฌธ์ œ๋ฅผ ๊ฒช๊ณ  ์žˆ๊ณ  ์ด๋ฅผ ํ•ด๊ฒฐํ•  ์ปค๋ฎค๋‹ˆํ‹ฐ ์ง€์‹์ด ์ถฉ๋ถ„ํ•˜๋‹ค๋ฉด ๊ทธ๋ ‡๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๊ฑด ๊ทธ๋ ‡๊ณ  ๋‚˜๋Š” ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€์žˆ์—ˆ์Šต๋‹ˆ๋‹ค - ๋‚ด๊ฐ€ ์‹ ๊ฒฝ ์“ฐ์ง€ ์•Š์€ ์ˆœ๊ฐ„ ๋กœ์ผ€์ผ์— ์˜ํ•ด ๋ฐœ์ƒํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ด ์˜จ๋ผ์ธ ๊ธฐ์‚ฌ ์—์„œ ํ•ด๊ฒฐ์ฑ…์„ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค. ์ œ ๊ฒฝ์šฐ์—๋Š” ๋กœ์ผ€์ผ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ๋ฌด์‹œํ•˜๊ธฐ์— ์ถฉ๋ถ„ํ–ˆ์Šต๋‹ˆ๋‹ค.

ํ”Œ๋Ÿฌ๊ทธ์ธ: [์ƒˆ๋กœ์šด webpack.IgnorePlugin(/^.\/locale$/, /moment$/)]

์ด๊ฒƒ์€ ๊ฝค ์ฃผ๋ฅ˜์ ์ธ ์‚ฌ์šฉ ์‹œ๋‚˜๋ฆฌ์˜ค์ฒ˜๋Ÿผ ๋ณด์ด๋ฏ€๋กœ ๋ฌธ์„œ ์˜

@authguidance-examples PR์€ https://github.com/moment/momentjs.com ์—์„œ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค!

๋‚˜๋Š” ๊ฐ™์€ ๋ฌธ์ œ์— ์ง๋ฉดํ–ˆ๊ณ  ์—ฌ๊ธฐ์— ๋ฌธ์ œ๊ฐ€์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

  • package.json ํŒŒ์ผ์— ๋ฐฉ๊ธˆ ์ถ”๊ฐ€๋œ npm i --save react-moment ์‚ฌ์šฉ์ž ์ง€์ • ๋ช…๋ น์„ ์‚ฌ์šฉํ•˜์—ฌ ์„ค์น˜ํ–ˆ์ง€๋งŒ node_modules์—๋Š” lib๊ฐ€ ์—†์—ˆ์œผ๋ฏ€๋กœ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.
  • npm install --save moment react-moment
  • ์ด์ œ ์˜ˆ์ƒ๋Œ€๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

์™œ ํ•ญ์ƒ "๋ช‡ ์ดˆ ์ „"์ฒ˜๋Ÿผ ํ‘œ์‹œ๋˜๋Š”์ง€ ์•„๋Š” ์‚ฌ๋žŒ? ๋‚ ์งœ๊ฐ€ ์–ด๋–ป๋“ 

๋‚˜๋Š” reactjs์— ์ˆœ๊ฐ„์„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. import * as moment from "moment"; ์˜์กด์„ฑ ์ฃผ์ž…์—์„œ "moment": "2.23.0"์ด ์ถ”๊ฐ€๋˜์—ˆ์ง€๋งŒ

์ •์˜๋˜์ง€ ์•Š์€ ์˜ค๋ฅ˜... reactjs์—์„œ
์นœ์ ˆํ•˜๊ฒŒ ๋„์™€์ฃผ์„ธ์š”...

์™œ ์ด ์ง€์ ์ด ๋‹ซํžˆ์ง€ ์•Š์Šต๋‹ˆ๊นŒ? 2019๋…„ 12์›” 2์ผ์˜ ๋งˆ์ง€๋ง‰ ๋Œ“๊ธ€ @marwahaha

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