Next.js: node_modules ๋‚ด๋ถ€์— ๋ชจ๋“ˆ์„ ํŠธ๋žœ์ŠคํŒŒ์ผํ•˜๊ธฐ ์œ„ํ•œ ์ง€์› ์ถ”๊ฐ€

์— ๋งŒ๋“  2017๋…„ 01์›” 09์ผ  ยท  103์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: vercel/next.js

์ด์ œ ์šฐ๋ฆฌ ์ค‘ ์ผ๋ถ€๋Š” ES2015๋กœ ์ž‘์„ฑ๋œ NPM ํŒจํ‚ค์ง€(ํŠนํžˆ ๊ตฌ์„ฑ ์š”์†Œ)๋ฅผ ํŠธ๋žœ์ŠคํŒŒ์ผํ•˜์ง€ ์•Š๊ณ  ๋ฐฐ์†กํ•ฉ๋‹ˆ๋‹ค.

ํŠนํžˆ Next.js ๋˜๋Š” CRA(ํŠธ๋žœ์ŠคํŒŒ์ผ์„ ์ˆ˜ํ–‰ํ•˜๋Š”)์™€ ๊ฐ™์€ ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋ ค๋Š” ๊ฒฝ์šฐ์—๋Š” ๋งค์šฐ ์ข‹์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ˜œํƒ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

  • NPM์œผ๋กœ ๋ฐฐ์†กํ•˜๊ธฐ ์ „์— ํŠธ๋žœ์ŠคํŒŒ์ผํ•  ํ•„์š” ์—†์Œ
  • Webpack 2์˜ ํŠธ๋ฆฌ ์‰์ดํ‚น ํ˜œํƒ ๋ฐ›๊ธฐ

๊ทธ๋Ÿฌ๋‚˜ ์ด์ œ ์šฐ๋ฆฌ๋Š” ์ด๊ฒƒ์„ ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. node_modules ๋‚ด๋ถ€์˜ ๋ชจ๋“  ๊ฒƒ์„ babel ๋ณ€ํ™˜์—์„œ ์ œ์™ธ ํ•ฉ๋‹ˆ๋‹ค.

์ œ์•ˆ๋œ ์†”๋ฃจ์…˜์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

babel์„ ๊ฑฐ์ณ์•ผ ํ•˜๋Š” ๋ชจ๋“ˆ์„ ํฌํ•จํ•˜๊ธฐ ์œ„ํ•ด next.config.js ์— ํ•ญ๋ชฉ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณด๋‹ค:

module.exports = {
   transpileModules: [
     "my-component",
     "redux/src"
   ]
}
story feature request

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

next.js ๋ฅผ ๋ณธ๊ฒฉ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์ฃผ๋ณ€์— ํ’๋ถ€ํ•œ ๋ชจ๋“ˆ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ตฌ์ถ•ํ• ์ˆ˜๋ก ์ด ๊ธฐ๋Šฅ์ด ๋” ์ค‘์š”ํ•ด์ง‘๋‹ˆ๋‹ค. ๋‚ด ๋‚ด๋ถ€ ๋ชจ๋“ˆ์—์„œ babel ์ปดํŒŒ์ผ ๋‹จ๊ณ„๋ฅผ ๋ณต์ œํ•˜๋Š” ์‹ค์ œ PITA๊ฐ€ ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿš€๐Ÿค–

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

  • webpack() ํ™•์žฅ์œผ๋กœ ์ด๊ฒƒ์ด ๋ถˆ๊ฐ€๋Šฅํ•œ ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
  • transpileModules ๋” ๋‚˜์€ ์†Œ๋ฆฌ
  • ์ •๊ทœ ํ‘œํ˜„์‹์„ ์ˆ˜๋ฝํ• ๊นŒ์š”?

webpack() ํ™•์žฅ์œผ๋กœ ์ด๊ฒƒ์ด ๊ฐ€๋Šฅํ•˜์ง€ ์•Š์€ ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

๋‚˜๋Š” ๋‹น์‹ ์ด ์‚ฌ์šฉ์ž ์ •์˜ webpack ๊ตฌ์„ฑ์„ ์˜๋ฏธํ•˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๊ฒƒ์€ ๊ธฐ์กด ๋กœ๋”์— ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์„ ์–ป๋Š” ๊ฒƒ์€ ๋‹ค์†Œ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.

transpileModules ๋” ์ž˜ ๋“ค๋ฆผ

์—„์ฒญ๋‚œ. ์—…๋ฐ์ดํŠธํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์ •๊ทœ ํ‘œํ˜„์‹์„ ์ˆ˜๋ฝํ• ๊นŒ์š”?
๋„ค. ํ™•์‹คํ•œ.

์ด๋ด,

๋‚ด ์›น์‚ฌ์ดํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๋ฉด์„œ Lerna/Next/Styled์™€ ๊ฐ™์€ ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์„ ์‹œ๋„ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ์ด์— ๋Œ€ํ•œ ์ดˆ๊ธฐ ํ”ผ๋“œ๋ฐฑ์„ ๊ธฐ๊บผ์ด ์ œ๊ณตํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๋‚ด NextJs ๋ชจ๋“ˆ์—์„œ CRA ๊ธฐ๋ฐ˜ ๋ชจ๋“ˆ์„ ๊ฐ€์ ธ์˜ค๊ฑฐ๋‚˜ ๋ณ€ํ™˜ํ•˜๋ ค๊ณ  ์‹œ๋„ํ–ˆ์ง€๋งŒ ๋ณ€ํ™˜์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ชฐ๋ž๋˜ ์ค‘๋ณต ๋ฌธ์ œ๋ฅผ ์—ด์—ˆ์Šต๋‹ˆ๋‹ค(๋‚ด ๋ชจ๋“ˆ์„ ๋…๋ฆฝ ์‹คํ–‰ํ˜•์œผ๋กœ ์‹คํ–‰ ๊ฐ€๋Šฅํ•˜๊ฒŒ ์œ ์ง€ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค).

๋‚˜๋Š” ๋˜ํ•œ Lerna๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๋Š” Babel์ด ๊ฐ ๋ชจ๋“ˆ์„ ๋…ธ์ถœํ•˜๊ธฐ ์ „์— ํŠธ๋žœ์ŠคํŒŒ์ผํ•˜๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•„์ฐจ ๋ ธ์ง€๋งŒ @arunoda๊ฐ€ ์ œ์•ˆํ•œ ๋Œ€๋กœ ํ•˜๊ณ  ํด๋ผ์ด์–ธํŠธ ์•ฑ์ด ํŠธ๋žœ์ŠคํŒŒ์ผ์„ ํ•˜๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด ๋” ๋‚˜์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

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

๋‚ด ํ˜„์žฌ ํ…Œ์ŠคํŠธ ํ”„๋กœ์ ํŠธ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. https://github.com/slorber/playground/ ํฌํฌ/PR์ด ์žˆ๋Š” ์ฆ‰์‹œ ์—…๊ทธ๋ ˆ์ด๋“œ๋ฅผ ์‹œ๋„ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. @arunoda ์ž‘์—…

@slorber๋Š” ํ˜„์žฌ 2.0 ๋ฆด๋ฆฌ์Šค์— ์ง‘์ค‘ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ๊ฐ€๋Šฅํ•œ ํ•œ ๋ฏธ์„ธ ์กฐ์ •ํ•˜๊ณ  ๋ฒ„๊ทธ๋ฅผ ์ฐพ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ด๊ฒƒ์— ๋Œ€ํ•œ ์ž‘์—…์„ ์‹œ์ž‘ํ•˜์ง€ ์•Š์•˜์ง€๋งŒ 2.0 ์ดํ›„์— ์ด๊ฒƒ์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ข‹์•„, ๊ทธ๋ž˜์„œ ๋‚ด๊ฐ€ ํฌํฌ๋ฅผ ๋งŒ๋“ค๊ฑฐ์•ผ. ์ค‘์š”ํ•œ ์›น ์‚ฌ์ดํŠธ๋ฅผ ๊ตฌ์ถ•ํ•˜์ง€ ์•Š๊ณ  ์žˆ๊ณ  webpack 1.13์ด jsnext:main/module ํ•„๋“œ๋ฅผ ํ•ด๊ฒฐํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฏธ 2.0.0 ๋ฒ ํƒ€์— ๋Œ€ํ•ด ์‹คํ–‰ ์ค‘์ž…๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋ฒˆ๋“ค๋Ÿฌ ์ „๋ฌธ๊ฐ€๋Š” ์•„๋‹ˆ์ง€๋งŒ package.json์˜ "๋ชจ๋“ˆ" ํ•„๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ์•„๋‹ˆ์š”? "main"์€ ๋‚ด๊ฐ€ ์•„๋Š” ํ•œ ์ด๋ฏธ ํŠธ๋žœ์ŠคํŒŒ์ผ๋œ ์ฝ”๋“œ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ webpack ๊ตฌ์„ฑ์—์„œ ํŠธ๋žœ์Šคํ•„๋ ˆ์ด์…˜์„ ํฌํ•จ/์ œ์™ธํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๊ด€๋ จ์„ฑ์ด ์žˆ๋Š”์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. 3๊ฐ€์ง€ ํ•„๋“œ ์ค‘ ์–ด๋Š ๊ฒƒ์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์€์ง€ ์ถ”์ฒœํ•ด ์ฃผ์„ธ์š”.

@slorber webpack ์€ NPM์ฒ˜๋Ÿผ main ๋งŒ ์ง€์›ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋‹น์‹ ์€ ๊ทธ๊ฒƒ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
next.conf.js ์˜ exclude ํ•จ์ˆ˜์—์„œ ํŒŒ์ผ ๊ฒฝ๋กœ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ , ๋‚ด๊ฐ€ ์‹ค์ œ๋กœ Next 2.x์— ๋Œ€ํ•ด ๋ณธ ๊ฒƒ์— ๋”ฐ๋ฅด๋ฉด jsnext:main ์ด ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๋™์•ˆ(๋‚ด๊ฐ€ ๊ธฐ์–ตํ•˜๋Š” ํ•œ) ๋ชจ๋“ˆ์ด ์ž‘๋™ํ•˜๋Š” ๊ฒƒ์„ ๋ณด์•˜์ง€๋งŒ(๊ทธ๋Ÿฌ๋‚˜ ๋‚˜์ค‘์— ๋ณ€ํ™˜๋˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— ๋Ÿฐํƒ€์ž„์— ์‹คํŒจํ–ˆ์Šต๋‹ˆ๋‹ค.) ํ•˜์ง€๋งŒ ์ง€์› ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์–ด์จŒ๋“  jsnext:main ๋˜๋Š” module์€ ์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ํ•ด๊ฒฐ์ฑ…์ด ์•„๋‹Œ ๊ฒƒ ๊ฐ™์œผ๋ฏ€๋กœ ํšŒ์‚ฌ ๋‚ด๋ถ€ ๋ชจ๋“ˆ์˜ ๊ฒฝ์šฐ ๋ณ€ํ™˜์„ ํ™œ์„ฑํ™”ํ•˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋„ ์ถฉ๋ถ„ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ํ•˜๋‚˜์˜ ์ ‘๊ทผ ๋ฐฉ์‹์— ๋™์˜ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๊นŒ? ์˜ˆ๋ฅผ ๋“ค์–ด, react-youtube ๋‹ค๋ฅธ ํ•˜๋‚˜๋ฅผ ๋ฌธ์ œ ์—†์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฒŒ์‹œํ•˜๊ธฐ ์ „์— ๋งŽ์€ ์ˆ˜์˜ ๋ชจ๋“ˆ์ด ๋ณ€ํ™˜๋œ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

์ฐธ์กฐ: https://github.com/rauchg/blog/blob/master/components/post/youtube.js

๋„ค, ๋ˆ„๊ฐ€/์–ด๋–ป๊ฒŒ ๋ชจ๋“ˆ์ด ์†Œ๋น„๋ ์ง€ ๋ชจ๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ๊ฒŒ์‹œํ•˜๊ธฐ ์ „์— ํ•ญ์ƒ ํŠธ๋žœ์ŠคํŒŒ์ผํ•˜๋Š” ๊ฒƒ์ด ํ•ฉ๋ฆฌ์ ์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด Rollup์ด ์ œ์•ˆํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค . ๋ฒˆ๋“ค๋Ÿฌ๊ฐ€ ์‚ฌ์šฉํ•  ๋ชจ๋“ˆ์„ ๊ฒฐ์ •ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋‹ค์–‘ํ•œ ๋ฐฉ์‹์œผ๋กœ ๋ณ€ํ™˜๋œ ๋ชจ๋“ˆ์„ ๊ฒŒ์‹œํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ํšŒ์‚ฌ ๋‚ด๋ถ€ ํŒจํ‚ค์ง€์˜ ๊ฒฝ์šฐ ๋ณ€ํ™˜ ์„ค์ •์ด ์—ฌ๋Ÿฌ ํ”„๋กœ์ ํŠธ(์˜ˆ: babel ์‚ฌ์ „ ์„ค์ •)์—์„œ ๋™์ผํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ํด๋ผ์ด์–ธํŠธ ๋ฒˆ๋“ค๋Ÿฌ๊ฐ€ ๋ชจ๋“  ํšŒ์‚ฌ ์ข…์†์„ฑ์„ ๋ณ€ํ™˜ํ•˜๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด ํ•ฉ๋ฆฌ์ ์ž…๋‹ˆ๋‹ค.

@slorber์— ๋งค์šฐ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ๋ฅผ ๋ถ„ํ• ํ•˜๊ณ  ๊ฐ€๋Šฅํ•œ ํ•œ ๋งŽ์€ ๊ฒƒ์„ ๊ฒฉ๋ฆฌํ•˜๋Š” ๊ฒฝ์šฐ ๋‚ด๋ถ€ ๋ชจ๋“ˆ์— ๋งค์šฐ ํŽธ๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  RegExp๋ฅผ ์ง€์›ํ•˜๋Š” @rauchg / @arunoda ๋Š” ์ •๋ง ์ข‹์„ ๊ฒƒ์ด๋ฏ€๋กœ NPM ์กฐ์ง ๋„ค์ž„์ŠคํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ชจ๋“  ํšŒ์‚ฌ ๋‚ด๋ถ€ ๋ชจ๋“ˆ์„ ํฌ์ฐฉํ•˜๋Š” ํ•˜๋‚˜์˜ ํ•ญ๋ชฉ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// next.config.js
module.exports = {
  transpileModules: [
    /^\@my-npm-org\/.*/
  ]
}

์•„๋ฆ„๋‹ค์šด ์ œ์•ˆ @philcockfield

์ด๋ด, ์–ด์ฉŒ๋ฉด ๋ช‡ ๊ฐ€์ง€ ์‚ฌ์ „ ์„ค์ •์„ ์ œ๊ณตํ•  ๊ฐ€์น˜๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๋„๊ตฌ(Lerna/npm ๋งํฌ...)๋Š” ์‹ฌ๋ณผ๋ฆญ ๋งํฌ์— ์˜์กดํ•˜๋ฏ€๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ฐ„๋‹จํ•˜์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

```์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
module.exports = {
transpileModules: ["symlinks"]
}
````

next.js ๋ฅผ ๋ณธ๊ฒฉ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์ฃผ๋ณ€์— ํ’๋ถ€ํ•œ ๋ชจ๋“ˆ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ตฌ์ถ•ํ• ์ˆ˜๋ก ์ด ๊ธฐ๋Šฅ์ด ๋” ์ค‘์š”ํ•ด์ง‘๋‹ˆ๋‹ค. ๋‚ด ๋‚ด๋ถ€ ๋ชจ๋“ˆ์—์„œ babel ์ปดํŒŒ์ผ ๋‹จ๊ณ„๋ฅผ ๋ณต์ œํ•˜๋Š” ์‹ค์ œ PITA๊ฐ€ ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿš€๐Ÿค–

์˜ค๋Š˜๋„ ์ž‘์—…์ค‘์ž…๋‹ˆ๋‹ค :)

@philcockfield ํ•œ ๋ฒˆ ์‹œ๋„ํ•ด ๋ณด์„ธ์š”: https://github.com/zeit/next.js/pull/749

@arunoda ๊ฐ์‚ฌ

๋”ฐ๋ผ์„œ PR์— ๋Œ€ํ•ด ์–ธ๊ธ‰ํ–ˆ๋“ฏ์ด ์ด๊ฒƒ์ด ์‹ฌ๋ณผ๋ฆญ ๋งํฌ๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š์œผ๋ฉด npm ๋งํฌ ๋˜๋Š” Lerna์—์„œ๋Š” ์ž‘๋™ํ•˜์ง€ ์•Š์ง€๋งŒ ํŠธ๋žœ์ŠคํŒŒ์ผ๋˜์ง€ ์•Š์€ npm ๋ชจ๋“ˆ์— ๋Œ€ํ•ด์„œ๋งŒ ๊ธฐ๋Šฅ์ด ์•ฝ๊ฐ„ ์ œํ•œ๋ฉ๋‹ˆ๋‹ค(๋งž์Šต๋‹ˆ๊นŒ? ๋‹ค๋ฅธ ๊ฒƒ์€ ๋ณด์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค. /node_modules ๋‚ด๋ถ€์— ๋ชจ๋“ˆ์„ ์ปค๋ฐ‹ํ•˜์ง€ ์•Š๋Š” ํ•œ ์œ ์Šค์ผ€์ด์Šค)

์‹ฌ๋ณผ๋ฆญ ๋งํฌ๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ์ง€์›ํ•˜๊ธฐ๊ฐ€ ๋” ์–ด๋ ต์Šต๋‹ˆ๊นŒ?

๋˜ํ•œ ๋‚ด ์•ฑ์—์„œ ๊ท€ํ•˜์˜ ๋ถ„๊ธฐ๋ฅผ ํ…Œ์ŠคํŠธํ•˜๊ณ  ์‹ถ์—ˆ์ง€๋งŒ ๊ฐ€์žฅ ์ข‹์€ ๋ฐฉ๋ฒ•์ด ๋ฌด์—‡์ธ์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ธŒ๋žœ์น˜๋ฅผ ์‰ฝ๊ฒŒ ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์žˆ๊ณ  ํ…Œ์Šคํ„ฐ์—๊ฒŒ ๋„ˆ๋ฌด ๊ณ ํ†ต์Šค๋Ÿฝ์ง€ ์•Š์€ ์ ˆ์ฐจ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? ๋‚˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒƒ์„ ์‹œ๋„ํ–ˆ๋‹ค.

  • npm install https://github.com/arunoda/next.js.git#add -706 : github repo์—์„œ ๋‹ค์Œ /bin ํด๋”๊ฐ€ ๋น„์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์‹คํŒจํ•ฉ๋‹ˆ๋‹ค.
  • /node_modules ๋‚ด๋ถ€์— ์žˆ๋Š” ํฌํฌ์˜ git clone: โ€‹โ€‹๋ณ„๋กœ ์„ฑ๊ณตํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค(๊ทธ๋Ÿฌ๋‚˜ ๋‚ด ํŠน์ • Lerna ์„ค์ • ๋•Œ๋ฌธ์ผ ์ˆ˜ ์žˆ์Œ)

ํ˜„์žฌ ํฌํฌ๋ฅผ ํ…Œ์ŠคํŠธํ•˜๋Š” ๊ฐ€์žฅ ์ข‹์€ ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

next.config.js : module.exports = { webpack: (config ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋ ค๋Š” ๊ฒฝ์šฐ config.module.rules ์— ๋ช‡ ๊ฐ€์ง€ ์‚ฌํ•ญ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ทœ์น™ ์ค‘ ํ•˜๋‚˜๋ฅผ ๋ณ€๊ฒฝํ•˜๊ฑฐ๋‚˜ ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๊นŒ? :

  { loader: 'babel-loader',
    include: '/Users/me/gh/guide/node_modules/next/dist/pages',
    options: 
     { babelrc: false,
       cacheDirectory: true,
       sourceMaps: 'both',
       plugins: [Object] } },
  { test: /\.js(\?[^?]*)?$/,
    loader: 'babel-loader',
    include: 
     [ '/Users/me/gh/guide',
       '/Users/me/gh/guide/node_modules/next/dist/pages' ],
    exclude: [Function: exclude],
    query: 
     { babelrc: true,
       cacheDirectory: true,
       sourceMaps: 'both',
       presets: [] } } ]

์ œ์•ˆ๋œ ๋” ๊ฐ„๋‹จํ•œ ๊ตฌ๋ฌธ์„ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๋‹ค.

์ œ ๋ฌด์ง€์— ๋Œ€ํ•ด ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ์˜ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ด ๋ฌด์—‡์ธ์ง€ ์•Œ ์ˆ˜ ์—†์Šต๋‹ˆ๊นŒ? ์šฐ๋ฆฌ๋Š” es6์„ ์šฐ๋ฆฌ์˜ ์ฝ”๋“œ๋ฒ ์ด์Šค๋กœ ๊ฐ€์ ธ์˜ค๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” tree-shaking์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์ด์— ๋Œ€ํ•œ ํ™๋ณด๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

@andrewmclagan ์ด ๋ฌธ์ œ๋Š” ์•„์ง ๊ณต๊ฐœ๋˜์–ด ์žˆ์œผ๋ฉฐ LernaJS ์‚ฌ์šฉ์ž์™€ ๊ฐ™์ด ๋ชจ๋‘๋ฅผ ๋งŒ์กฑ์‹œํ‚ค์ง€ ๋ชปํ•  ๊ด€๋ จ PR ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ์ƒํƒœ๋Š” ์–ด๋–ป์Šต๋‹ˆ๊นŒ? node_modules์—์„œ ๊ฐ€์ ธ์˜จ ํŒŒ์ผ์„ transpileํ•˜๊ธฐ ์œ„ํ•ด next์˜ webpack์„ ๋งŒ๋“œ๋Š” ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

@slorber PR์„ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ์˜ ์‚ฌ์šฉ ์‚ฌ๋ก€์— ๊ธฐ์—ฌํ•˜์‹ญ์‹œ์˜ค.

๋น„์Šทํ•œ ๋ฌธ์ œ์— ์ง๋ฉดํ•ด ์žˆ์Šต๋‹ˆ๋‹ค. get-urls ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. dev ์ฐพ์„ ์ˆ˜ ์žˆ์ง€๋งŒ ์ปดํŒŒ์ผํ•  ๋•Œ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. uglify์—์„œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

...
{ Error: commons.js from UglifyJs
...

์ด์— ๋Œ€ํ•œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

Arunoda๋Š” ์–ธ์  ๊ฐ€ ์—ฌ๊ธฐ์—์„œ ์ž‘์—…ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Š” # 749์—์„œ ์ „์— ํ•œ ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๊ธฐ๋Šฅ์ด ๊ตฌํ˜„๋˜๋Š” ๊ฒƒ์„ ๋ณด๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. @philcockfield๊ฐ€ ์–ธ๊ธ‰ํ–ˆ๋“ฏ์ด Next.js ๋ณ€ํ™˜์— ์˜์กดํ•˜๋Š” ๋ชจ๋“ˆ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š” ๊ฒƒ์€ ์ผ๋ฐ˜์ ์ธ ์‹œ๋‚˜๋ฆฌ์˜ค์ด๋ฉฐ ํ”„๋กœ์ ํŠธ ๊ฐ„์— ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ๋‚˜๋ฌด ํ”๋“ค๊ธฐ์—๋งŒ ํ•„์š”ํ•œ ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค. styled-jsx ์™€ ๊ฐ™์€ babel ํ”Œ๋Ÿฌ๊ทธ์ธ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ babel ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“ˆ(์˜ˆ: ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ)์ด ์žˆ๋Š” ๊ฒฝ์šฐ ๊ฐ€์žฅ ์ข‹์€ ์†”๋ฃจ์…˜์€ ES6 ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ํฌํ•จํ•˜๊ณ  ์•ฑ์ด node_modules์—์„œ ์ด๋ฅผ ํŠธ๋žœ์ŠคํŒŒ์ผํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ฌผ๋ก  ๋‹ค์Œ์—๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ styled-jsx ๊ฐ€ ์ด๋ฏธ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

์—ฌ๊ธฐ ๋‚ด๊ฐ€ ํ•œ ์ผ์ด ์žˆ์Šต๋‹ˆ๋‹ค

// next.config.js
exports.webpack = config => (config.module.rules = config.module.rules.map(({exclude, ...rest}) => ({
  exclude: Object.prototype.toString.call(exclude) === '[object Function]' ? (str => !/mycomponents/.test(str) && exclude(str)) : exclude,
  ...rest
})), config);

๊ธฐ๋ณธ์ ์œผ๋กœ ๊ฐ exclude ๋ฅผ ์‚ฌ์šฉ์ž ์ •์˜ ํ•จ์ˆ˜๋กœ ๋Œ€์ฒดํ–ˆ์Šต๋‹ˆ๋‹ค.
๋‚˜๋Š” ๋‚ด๊ฐ€ ๋ฌด์—‡์„ ์ž˜๋ชปํ•˜๊ณ  ์žˆ๋Š”์ง€ ๋ชจ๋ฅด์ง€๋งŒ ๊ทธ๊ฒƒ์„ ์ž‘๋™์‹œํ‚ฌ ์ˆ˜๋Š” ์—†์Šต๋‹ˆ๋‹ค.
node_modules/mycomponents ๋‚ด์šฉ๋„ Next.js๋กœ ํŠธ๋žœ์ŠคํŒŒ์ผ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  ์ œ์™ธ๋ฅผ ๋นˆ ๋ฐฐ์—ด๋กœ ์™„์ „ํžˆ ์žฌ์ •์˜ํ•ด๋„ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

exports.webpack = config => (config.module.rules = config.module.rules.map(({exclude, ...rest}) => ({
  exclude: [],
  ...rest
})), config);

๋„์™€์ฃผ์„ธ์š” :)
๊ฐ์‚ฌ ํ•ด์š”

์•ˆ๋…•ํ•˜์„ธ์š” ์—ฌ๋Ÿฌ๋ถ„( @thealjey ) ์ €๋Š” ์ง€๊ธˆ๊นŒ์ง€ ๋ช‡ ๋‹ฌ ๋™์•ˆ jsnext:main ์ „์› ๋ชจ๋“ˆ์„ ํŠธ๋žœ์ŠคํŒŒ์ผํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” next.js ์žˆ์ง€ ์•Š์ง€๋งŒ ๋„์›€์ด ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

@damianobarbati ์•„๋‹ˆ์š”, ๋ถˆํ–‰ํžˆ๋„ ๊ทธ๋ ‡์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
์–ด๋ ต์ง€ ์•Š์€ ๊ฒƒ์€ ๋ฌด์—‡์ด๋“  ํŠธ๋žœ์ŠคํŒŒ์ผํ•˜๋„๋ก webpack์„ ์ง์ ‘ ๊ตฌ์„ฑํ•˜์ง€๋งŒ Next.js์˜ ์ปจํ…์ŠคํŠธ์—์„œ ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฐ ์–ด๋ ค์›€์„ ๊ฒช๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋ด ์—ฌ๋Ÿฌ๋ถ„, ๋ˆ„๊ตฌ๋“ ์ง€ ํ•ด๊ฒฐ์ฑ…์„ ์ฐพ์•˜์Šต๋‹ˆ๊นŒ?

๋‚ด ํ”„๋กœ์ ํŠธ์—์„œ ๊ฐ€์ ธ์™€์•ผ ํ•˜๋Š” ๋กœ์ปฌ ES6 ์—ฐ๊ฒฐ๋œ ๋…ธ๋“œ ๋ชจ๋“ˆ์ด ์žˆ์ง€๋งŒ webpack ๋ถ€๋‘๋ฅผ ์ œ๋Œ€๋กœ ์–ป์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค!

๋” ๋‚˜์€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค๊ณ  ํ™•์‹ ํ•˜์ง€๋งŒ ๋นŒ๋“œ ์‹œ babel์„ ํ†ตํ•ด ๋ชจ๋“  ๊ฒƒ์„ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.

next build && babel .next/*.js --out-dir . --presets=es2015,react

์ด๊ฑฐ ์ฃฝ์—ˆ์–ด? ์‚ฌ์šฉ์ž ์ •์˜ ๋ชจ๋“ˆ์„ ๋ณ€ํ™˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ๊ณ  ์žˆ๋Š”๋ฐ ์—ฌ์ „ํžˆ ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

@mattfelten v5 ๋กœ๋“œ๋งต์— ์žˆ์Šต๋‹ˆ๋‹ค ๐Ÿ‘

๋ˆ„๊ตฌ๋“ ์ง€ ์ด์— ๋Œ€ํ•œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์˜ ์˜ˆ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

@timneutkens ์ด์— ๋Œ€ํ•œ ์ผ์ •์ด ์žˆ์Šต๋‹ˆ๊นŒ? ์ข…์ข… ๋ถˆ๊ฐ€๋Šฅํ•œ ์งˆ๋ฌธ์ด์ง€๋งŒ ์šฐ๋ฆฌ๋Š” ํ˜„์žฌ ์ž‘๋™ ์ค‘์ธ ์Šคํƒ์„ ํ™•์ธํ•˜๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ์ด๊ฒƒ์€ ์šฐ๋ฆฌ์—๊ฒŒ ๊ฝค ํฐ ๋ฐฉํ•ด ์š”์†Œ์ž…๋‹ˆ๋‹ค! :)

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• ์ œ์•ˆ๋„ ์œ ํšจํ•ฉ๋‹ˆ๋‹ค.

@thealjey ๋Š” ์ด๊ฒƒ์ด ์˜ค๋ž˜๋œ ์˜๊ฒฌ์ด๋ผ๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์ง€๋งŒ ์žฌ์ •์˜ํ•ด์•ผ ํ•  include ์ง€์ •๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์†”๋ฃจ์…˜์ด ์ž‘๋™ํ•˜์ง€ ์•Š์•˜์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์—…๋ฐ์ดํŠธ: ์ด ์ „๋žต์„ ์‚ดํŽด๋ณด์•˜์ง€๋งŒ next.js์˜ ๋‚ด๋ถ€ ๊ตฌ์„ฑ ๋‚ด์˜ ๋‹ค๋ฅธ ๋ชจ๋“ˆ ๋””๋ ‰ํ† ๋ฆฌ์— ๋Œ€ํ•œ ๋ชจ๋“  ๋‹ค๋ฅธ ๋กœ๋”๋ฅผ ๊ณ ๋ คํ•  ๋•Œ ์ œ์ •์‹ ์ด ์•„๋‹™๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์ผ๊ธ‰์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

@chrisui ๋‚ด (์ž„์‹œ) ์†”๋ฃจ์…˜์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ตฌ์„ฑ๋œ babel-plugin-module-resolver ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์—ˆ์Šต๋‹ˆ๋‹ค - "plugins": [["module-resolver", {"root": ["./"]}]]
๊ทธ๊ฒƒ์€ ๊ฒฐ์ฝ” ์™„๋ฒฝํ•œ ์†”๋ฃจ์…˜์€ ์•„๋‹ˆ์ง€๋งŒ ๋‹ค๋ฅธ ๋ชจ๋“  ๊ฒƒ์ด ์‹คํŒจํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ง€๊ธˆ์€ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.
๋•๋ถ„์— ๊ฐ€์ ธ์˜ฌ ๋•Œ๋งˆ๋‹ค ๋งŽ์€ ../ ๋ฅผ ์“ธ ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
์ด๊ฒƒ์€ ์žฌ์‚ฌ์šฉ์„ฑ์— ํ™•์‹คํžˆ ๋„์›€์ด ๋˜์ง€๋Š” ์•Š์ง€๋งŒ ์‹ค์ œ๋กœ ์ผ๋ถ€์—๊ฒŒ๋Š” ๋” ๋‚˜์€ ์†”๋ฃจ์…˜์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@thealjey ์˜ˆ๋ฅผ ๋“ค์–ด ์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?
๋‚˜๋Š” ์ด๊ฒƒ์„ ์•„๋ฌด ์†Œ์šฉ์ด์—†๋Š” ํ”„๋กœ์ ํŠธ ์„ค์ •์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค ...
https://github.com/jamesgorrie/nappy

๋‚˜๋Š” ํ–‰๋ณต์ด ๋„ˆ๋ฌด ์‰ฝ๊ฒŒ ์šฐ๋ฆฌ์˜ ์‚ถ์„ ๋งŒ๋“ค ๊ฒƒ๋กœ ํ™๋ณด๋ฅผ ์–ป์„ํ•˜๋ ค๊ณ  ์‹ถ์ง€๋งŒ, ๊ฐ™์€ ๋ช‡ ๊ฐ€์ง€ ์งˆ๋ฌธ์ด ์žˆ์Šต๋‹ˆ๋‹ค :ํ•ด์•ผ๋Š” next.js ํŠน์ • ๋ชจ๋“ˆ์˜ ์ง€์› transpiling ๋˜๋Š”์ด๋Š” transpiler๊นŒ์ง€ํ•ด์•ผํ•˜์ง€๋งŒ, next.js ๋Š” ๋ชจ๋“ˆ ํ•ด์ƒ๋„๋ฅผ ๋ณด๋‹ค ์—„๊ฒฉํ•˜๊ฒŒ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค. next.js ๋ฅผ ์ฒ˜์Œ ์ ‘ํ•˜๋Š” ์‚ฌ๋žŒ์ด๋‚˜ ์–ด๋””์„œ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์•ผ ํ• ์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.

v5์˜ ๋กœ๋“œ๋งต์— ์žˆ์Šต๋‹ˆ๋‹ค ๐Ÿ‘

@timneutkens ์ด๊ฒŒ v5๋กœ

์•Œ๊ณ  ์‹ถ์–ด.

๋ณ‘ํ•ฉ ๋œ ์œ„์น˜๋ฅผ ์‚ดํŽด๋ณด์‹ญ์‹œ์˜ค. ์ด๊ฒƒ์€ 8 ์ผ ์ „์— ๋ณ‘ํ•ฉ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. 5.0.0์ด 2์ผ ์ „์— ๋ฆด๋ฆฌ์Šค๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๋ณ‘ํ•ฉ๋˜๋Š” ์นด๋‚˜๋ฆฌ์•„ ์ง€์ ์—์„œ ...

๋ˆ„๊ตฌ๋“ ์ง€ ์ด๊ฒƒ์ด ๊ตฌํ˜„๋˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์˜ˆ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? ์œ„์—์„œ ์–ธ๊ธ‰ํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ์ด๋ ‡๊ฒŒ ์ž‘๋™ํ•ด์•ผ ํ•ฉ๋‹ˆ๊นŒ?

module.exports = {
    transpileModules: ['my-npm-module']
}

์•„๋‹ˆ๋ฉด ๋‹ค๋ฅด๊ฒŒ ๋ณด์ž…๋‹ˆ๊นŒ?

ํ˜ผ๋ž€์Šค๋Ÿฌ์›Œ์š”. @timneutkens ์œ„์—์„œ ์–ธ๊ธ‰ํ•œ ๋งํฌ๋Š” ์•„์ง ์—ด๋ ค ์žˆ๋Š” PR์— ๋Œ€ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์•„์ง v5์— ๋ณ‘ํ•ฉ๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๊นŒ?

ํŽธ์ง‘: ์‹ ๊ฒฝ ์“ฐ์ง€ ๋งˆ์„ธ์š”. ์ด๊ฒƒ์€ ๋‹จ์ง€ ์˜ˆ๋ฅผ ๊ฐ•์กฐํ•˜๊ธฐ ์œ„ํ•œ PR์ž…๋‹ˆ๋‹ค.

์˜ˆ์‹œ์ด๋‹ˆ ๋ณ‘ํ•ฉํ•˜์ง€ ์•Š๊ณ  ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. transpileModules ๋Š” ๋‚˜์ค‘์— ๋‹ค๋ฃฐ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ผ๋ฐ˜์ ์œผ๋กœ ๋ฌธ์ œ๊ฐ€ ๊ณต๊ฐœ๋˜๋ฉด ๊ณต๊ฐœ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

@brianyingling ์ž„์‹œ ์†”๋ฃจ์…˜(v5 ์ „์šฉ)์„ ์œ„ํ•œ ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ ์˜ˆ์ œ๋ฅผ ๋ณ€ํ™˜ํ–ˆ์Šต๋‹ˆ๋‹ค.
๋ณด๋‹ค ๊ฐ•๋ ฅํ•˜๊ณ  ๊ณต์‹์ ์ธ ์†”๋ฃจ์…˜์ด ๋งˆ๋ จ๋  ๋•Œ๊นŒ์ง€ ํ˜„์žฌ๋กœ์„œ๋Š” ์ž‘๋™ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

https://www.npmjs.com/package/@weco/next -plugin-transpile-modules

์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ฝ”๋“œ๋ฒ ์ด์Šค์˜ ๋‹จ์ผ ๋ชจ๋“ˆ์— ๋Œ€ํ•œ ์ด์— ๋Œ€ํ•œ ์˜ˆ๋ฅผ ๋ณด๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ์„œ๋ฒ„ ์ธก๊ณผ ํด๋ผ์ด์–ธํŠธ ์ธก ๋ชจ๋‘๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“ˆ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“ˆ์„ ์ž์ฒด ๋ณ„๋„์˜ ๋ชจ๋“ˆ๋กœ ๋ถ„ํ•ดํ•˜๊ณ  yarn link ํ•˜๊ฑฐ๋‚˜ webpack ๊ทœ์น™์„ ํ•ดํ‚นํ•˜์—ฌ ์œ„์˜ ์˜ˆ์ œ๋ฅผ ์ž‘๋™์‹œํ‚ค์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ์€ ๊ฐ„๋‹จํ•œ ์žฌํ˜„์ž…๋‹ˆ๋‹ค. https://github.com/statico/nextjs-with-async-lib

// pages/index.js
import { foo } from '../lib/test'
export default () => <div>hello {String(typeof foo)}</div>

// lib/test.js
async function foo () {}
module.exports = { foo }

@timneutkens ๋Š” ์ด๊ฒƒ์ด ๊ณต์œ  ๋ชจ๋“ˆ์—์„œ async/await ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ ์ด๋ผ๊ณ  ๋งํ•ฉ๋‹ˆ๋‹ค. ๋‚ด ์†”๋ฃจ์…˜์€ async/await๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ๋ชจ๋“  ๊ฒƒ์„ .then() ์Šคํƒ€์ผ ์ฝœ๋ฐฑ์œผ๋กœ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์•Œ๊ฒ ์Šต๋‹ˆ๋‹ค. ์ €์—๊ฒŒ ๋งž๋Š” ์ˆ˜์ • ์‚ฌํ•ญ์„ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค.

๋จผ์ € https://github.com/zeit/next.js/issues/3018#issuecomment -380879576์— ๋”ฐ๋ผ config.resolve.symlinks = false ์„ค์ •์„ next.config.js ๊ตฌ์„ฑ์— ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

// next.config.js
webpack: (config, { dev }) => {
  config.resolve.symlinks = false
  return config
}

๊ทธ๋Ÿฐ ๋‹ค์Œ CommonJS ๋‚ด๋ณด๋‚ด๊ธฐ ๋ฐ async / await ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” .js ํŒŒ์ผ์„ shared ๋ผ๋Š” ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ ํ•˜์œ„ ๋””๋ ‰ํ„ฐ๋ฆฌ์— ๋„ฃ์Šต๋‹ˆ๋‹ค.

// shared/index.js
async function foo () {}
module.exports = { foo }
// shared/package.json
{
  "name": "@myapp/shared",
  "version": "1.0.0",
  "main": "index.js",
  "license": "UNLICENSED",
  "private": true,
  "dependencies": { ... }
}

๊ทธ๋ฆฌ๊ณ  ๋งˆ์ง€๋ง‰์œผ๋กœ ๋ฉ”์ธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ yarn install ๋ฅผ ํ•  ๋•Œ ์ด๋ฅผ ๋ชจ๋‘ ์—ฐ๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด postinstall ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

// package.json
{
  ...
  "scripts": {
    "postinstall": "cd shared ; yarn -s unlink ; yarn link && yarn && cd .. && yarn link @myapp/shared",
   ...

์ด์ œ ๋‚ด Mocha ํ…Œ์ŠคํŠธ๊ฐ€ ์„œ๋ฒ„ ์ธก์—์„œ ํ†ต๊ณผํ•˜๊ณ  ๋‚ด ์‚ฌ์šฉ์ž ์ง€์ • Koa ์„œ๋ฒ„๊ฐ€ ์ œ๋Œ€๋กœ ์‹œ์ž‘๋˜๊ณ  ๋‚ด NextJS ํŽ˜์ด์ง€์— ๋” ์ด์ƒ ๋ฏธ์นœ Cannot assign to read only property 'exports' of object '#<Object>' ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

NextJs 5.1.0์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•  ๋•Œ๋„ ์ด์™€ ๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ๋…ธ๋“œ ๋ชจ๋“ˆ ์ค‘ ํ•˜๋‚˜ ๋˜๋Š” ๋‘ ๊ฐœ๋Š” ๋šฑ๋šฑํ•œ ํ™”์‚ดํ‘œ ๊ธฐ๋Šฅ์„ ๋ณ€ํ™˜ํ•˜์ง€ ์•Š๊ณ  IE11์—์„œ ์˜ค๋ฅ˜๋ฅผ ๋˜์กŒ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด์ „์— ๊ฐœ๋ณ„ polyfills์„ ์„ค์ •ํ•˜๋Š” ๊ณผ์ • ์™”๊ณ , ๊ฒฐ๊ตญ ๋‚ด๊ฐ€ ๊ฐ€์ง„ ๊ทธ ๋ชจ๋“ˆ ํŒŒ์ผ์„ ๋Œ€์ƒ์œผ๋กœ ์„ ํƒํ–ˆ๋‹ค babel-polyfill ๋‚ด์—์„œ next.config.js ์ด๊ณผ๋ฅผ :

module.exports = {
  webpack: (config, { dev }) => {
    const polyfill = new Promise((resolve, reject) => {
      const originalEntry = config.entry

      originalEntry().then(entries => {
        if (entries['main.js']) {
          entries['main.js'].unshift('./client/polyfills.js')
          entries['main.js'].unshift('babel-polyfill')
        }
        config.entry = entries

        resolve()
      })
    })

    config.module.rules.push(
     {
        test: path.resolve('./node_modules/next/node_modules/'),
        loader: 'babel-loader',
        options: {
          babelrc: false,
          cacheDirectory: false,
          presets: ['es2015']  
        }
      }
    )

    return polyfill.then(() => { return config })
  }
}

์ด๊ฒƒ์ด ๋ˆ„๊ตฐ๊ฐ€๋ฅผ ๋•๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

ESM ์€ ๋งค๋ ฅ์ฒ˜๋Ÿผ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

index.js ์˜ ์‚ฌ์šฉ์ž ์ •์˜ Next.js ์„œ๋ฒ„๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด ๋ช…๋ น์„ ์‹คํ–‰ํ•˜์—ฌ ์„œ๋ฒ„๋ฅผ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ๊ณ  esm์ด ์™„๋ฒฝํ•˜๊ฒŒ ์‹œ์ž‘๋˜์–ด Lerna-symlinked ํ”„๋กœ์ ํŠธ ํŒจํ‚ค์ง€์—์„œ ES ๋ชจ๋“ˆ์„ ํ•ด๊ฒฐํ•ฉ๋‹ˆ๋‹ค.

node -r esm index.js

@curran ๋ฉ‹์ง„, babel-node๋ฅผ ๋Œ€์ฒดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

@curran ๋‚˜๋Š” ํ”„๋กœ๋•์…˜์—์„œ ๊ทธ๋ ‡๊ฒŒํ•˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@blackbing ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.

@thealjey ์™œ ๊ทธ๋ž˜?

๋ˆ„๊ตฌ๋“ ์ง€ ๋น ๋ฅด๊ณ  ์‰ฌ์šด ์†”๋ฃจ์…˜์„ ์ฐพ๊ณ  ์žˆ๋‹ค๋ฉด ์—ฌ๊ธฐ ๋‚ด๊ฐ€ ํ•œ ์ผ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋…๋ฆฝ ์‹คํ–‰ํ˜• Node ์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด ๋ฐฑ์—”๋“œ์™€ NextJS๋ฅผ ํ†ตํ•ด ํด๋ผ์ด์–ธํŠธ ๋ชจ๋‘์—์„œ ์‹คํ–‰ํ•˜๋ ค๋Š” ์ฝ”๋“œ๊ฐ€ ํฌํ•จ๋œ shared/ ํ•˜์œ„ ๋””๋ ‰ํ† ๋ฆฌ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ์ž์ฒด package.json ๊ฐ€ ์žˆ๊ณ  ์ด๋ฆ„์„ @myproject/shared ๋กœ ์„ ์–ธํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋Ÿฐ ๋‹ค์Œ ๊ธฐ๋ณธ(์ƒ์œ„) ํ”„๋กœ์ ํŠธ์—์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‚ฌํ›„ ์„ค์น˜ ์Šคํฌ๋ฆฝํŠธ๋ฅผ package.json ํ–ˆ์Šต๋‹ˆ๋‹ค. cd shared && yarn -s unlink >/dev/null 2>&1 ; yarn -s link && yarn -s && yarn link @myproject/shared โ€” ๊ทธ๋Ÿฐ ๋‹ค์Œ yarn ๋ฅผ ํ•œ ๋ฒˆ ์ด์ƒ ์‹คํ–‰ํ•˜๊ณ  ๊ฐ€์ ธ์˜ค๊ธฐ๋ฅผ import { whatever } from '@myproject/shared/somefile' ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.

์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๊ณต์œ  ์ฝ”๋“œ๊ฐ€ ๋ฏธ์นœ ๋ณ€ํ™˜ ๋‹จ๊ณ„ ์—†์ด ์ž‘๋™ํ•˜๋ฉฐ yarn link ๊ฐ€ ์—…๋ฐ์ดํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ๋งˆ๋‹ค yarn / npm ๋ฅผ ๋‹ค์‹œ ์‹คํ–‰ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์‹ฌ๋ณผ๋ฆญ ๋งํฌ.

TypeScript๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ @weco/next-plugin-transpile-modules ๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Next์˜ withTypescript ๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ํฌํฌ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. https://github.com/KeitIG/next-plugin-transpile-modules

๊ทธ๋ž˜๋„ TypeScript์— ์„œ๋ฒ„ ์ธก ์ฝ”๋“œ๊ฐ€ ํ•„์š”ํ•  ๋•Œ ์ œ๋Œ€๋กœ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋‚ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์— ๋Œ€ํ•œ ์†Œ์‹์ด ์žˆ์Šต๋‹ˆ๊นŒ?

@bogdansoare https://github.com/KeitIG/next-plugin-transpile-modules๋ฅผ ์‚ฌ์šฉํ•˜๊ณ 

๊ทธ๋ฆฌ๊ณ  ๋‹ค์Œ ์š”์ง€์—์„œ ๋‚ด๊ฐ€ ํ•œ ๋˜ ๋‹ค๋ฅธ ๊ฒƒ. TypeScript ๋ฐ ๋ชจ๋“  ํŒจํ‚ค์ง€๊ฐ€ ์•„๋‹Œ @scope ์˜ ํŠน์ • ํŒจํ‚ค์ง€๋„ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค. https://gist.github.com/trusktr/44400d0d016c506629b4f914799dc9cd

esm ๋ฐ lerna ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ„๋‹จํ•œ ์ž‘์—… ์˜ˆ์ œ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

https://github.com/curran/nextjs-esm-example

/cc @jdalton

๊ฐœ์ธ์ ์œผ๋กœ ๋‹ค์Œ next.config.js .

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.js$/,
      include: /node_modules/,
      use: [
        options.defaultLoaders.babel
      ]
    })

    return config
  }
}

IE 11 ํ˜ธํ™˜์„ฑ์„ ๋‹ฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ node_modules ๋ชจ๋“  ๊ฒƒ์„ babels ...

๋˜ํ•œ ๋‚ด ํ”„๋กœ์ ํŠธ์— ๋ณ€ํ™˜๋˜์ง€ ์•Š์€ npm ํŒจํ‚ค์ง€๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐ ์–ด๋ ค์›€์„ ๊ฒช๊ณ  ์žˆ๋Š” ์ด์— ๋Œ€ํ•œ ์†”๋ฃจ์…˜์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์ง€๊ธˆ์€ ๊ณต๊ธ‰์—…์ฒด์— ๋‹ค์šด๋กœ๋“œํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค/:(
์ •๋ง ์งœ์ฆ๋‚œ๋‹ค

@bel0v ๋‚˜๋Š” ๋‹น์‹ ์ด ์ด๋ฏธ next-plugin-transpile-modules ์ด๊ฒƒ์„ ๋‹ฌ์„ฑํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ๋Š” ๋‹ซํ˜€ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. cc/ @timneutkens

์—ฌ์ „ํžˆ ๋Œ€์ฒด ์†”๋ฃจ์…˜์„ ์กฐ์‚ฌํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

์ตœ๊ทผ Jamie๋Š” node_modules ์ปดํŒŒ์ผ ๋ฌธ์ œ์— ๋Œ€ํ•ด ๋งค์šฐ ์ž์„ธํ•œ ์Šค๋ ˆ๋“œ๋ฅผ ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค. https://twitter.com/jamiebuilds/status/1080840492525350912

Jamie์˜ ์Šค๋ ˆ๋“œ๋ฅผ ์ฝ์—ˆ์ง€๋งŒ ์ด ์ƒํ™ฉ๊ณผ ์†”๋ฃจ์…˜์— ๋Œ€ํ•œ Henry Zhu์™€ Babel์˜ ๊ฒฌํ•ด๋„ ๊ณต์œ ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.
https://babeljs.io/blog/2018/06/26/on-consuming-and-publishing-es2015+-packages

(Tim์— ๋™์˜ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๋งŽ์€ ์žฅ๋‹จ์ ์„ ๊ณต์œ ํ•  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. Tim์ด ๋Œ€์•ˆ ์†”๋ฃจ์…˜์„ ์กฐ์‚ฌํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.)

๋„ค ์ €ํฌ๋Š” ์ง€๋‚œ ๋ฐ˜๋…„ ๋™์•ˆ ์ด ๋ฌธ์ œ์— ๋Œ€ํ•ด Henry๋ฅผ ํฌํ•จํ•˜์—ฌ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค๊ณผ ์ด์•ผ๊ธฐ๋ฅผ ๋‚˜๋ˆ„์—ˆ์Šต๋‹ˆ๋‹ค ๐Ÿ˜„

node_modules ํŠธ๋žœ์ŠคํŒŒ์ผ์— ๋Œ€ํ•œ ์šฐ๋ ค์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์ž์‹ ์˜ ํŒจํ‚ค์ง€๋ฅผ monorepo์— ํŠธ๋žœ์ŠคํŒŒ์ผํ•˜๋ ค๋Š” ๊ฒƒ์€ ์ด๋Ÿฌํ•œ ์šฐ๋ ค๊ฐ€ ์ ์šฉ๋˜์ง€ ์•Š๋Š” ๋งค์šฐ ์ผ๋ฐ˜์ ์ธ ์š”๊ตฌ ์‚ฌํ•ญ์ž…๋‹ˆ๋‹ค.

@dcalhoun ์‹œ๋„ํ–ˆ์ง€๋งŒ ๋ถˆํ–‰ํžˆ๋„ ์—ฌ์ „ํžˆ ์˜ˆ๊ธฐ์น˜ ์•Š์€ ํ† ํฐ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์ด ํ”Œ๋Ÿฌ๊ทธ์ธ์—๋Š” ๊ด€๋ จ์ด ์žˆ์„ ์ˆ˜ ์žˆ๋Š” ์—ด๋ฆฐ Next 7 ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

@bel0v

FAQ๋ฅผ ์ฝ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค ;) ์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ํ•ด๊ฒฐ์ฑ…์ด ์žˆ์Šต๋‹ˆ๋‹ค: https://github.com/martpie/next-plugin-transpile-modules#i -have-trouble-making-it-work-with-nextjs-7

์—ฌ๋Ÿฌ ํ”„๋กœ์ ํŠธ์—์„œ ์ด ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•ด ์™”์œผ๋ฉฐ ์ž‘์—…์ด ์ž˜ ์ˆ˜ํ–‰๋ฉ๋‹ˆ๋‹ค. Next 7 ๋ฌธ์ œ๋Š” ์ด์ƒํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด Next ๋˜๋Š” Babel์—์„œ ์˜ค๋Š” ๊ฒƒ์ธ์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์–ด์จŒ๋“  ์—ฌ๊ธฐ์—์„œ ๋ฌธ์ œ๋ฅผ ์—ด์—ˆ์Šต๋‹ˆ๋‹ค: https://github.com/zeit/next.js/issues/5393

@martpie ๋„ค ํ•ด๋ณธ๊ฑฐ ๊ฐ™์•„์š”..์–ด์จŒ๋“ 

@martpie ์šฐ๋ฆฌ๋Š” ์ผ๊ด€๋œ babel.config.js ๋ฐ yarn ์ž‘์—… ๊ณต๊ฐ„์œผ๋กœ next7์„ ์‚ฌ์šฉํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ„๋‹จํ•œ ์˜ˆ์ œ๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์—์„œ ๊ธฐ๋ณธ ์˜ˆ์ œ๋ฅผ ๋ถ„๊ธฐํ–ˆ์Šต๋‹ˆ๋‹ค.
https://github.com/bel0v/learnnextjs-demo
๊ฑฐ๊ธฐ์— ๋ณ€ํ™˜๋˜์ง€ ์•Š์€ ์ข…์†์„ฑ(wired-elements)์„ ์„ค์น˜ํ–ˆ๊ณ  ๋นŒ๋“œ ์˜ค๋ฅ˜ Unhandled Rejection (SyntaxError): Unexpected token { ์–ป์—ˆ๊ณ  ์ œ์•ˆ๋œ ๋ฐฉ์‹์œผ๋กœ ์ˆ˜์ •ํ•˜๋ ค๊ณ  ํ–ˆ์Šต๋‹ˆ๋‹ค.
์ž‘๋™ํ•˜๋ ค๋ฉด ์ถ”๊ฐ€ babel ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ํ•„์š”ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๐Ÿค”

@bel0v FAQ์— ๋‹ค์‹œ Lerna ์„ค์ •์ด ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ์ด์œ ์— ๋Œ€ํ•œ ์„ค๋ช…์ด ์žˆ์Šต๋‹ˆ๋‹ค.

@martpie ์•„, ์•Œ์•˜์–ด์š”! ํƒ€์‚ฌ ํŒจํ‚ค์ง€๊ฐ€ Lerna๋กœ ์„ค์ •๋˜์—ˆ๋‹ค๋Š” ์‚ฌ์‹ค์„ ๋ชฐ๋ž์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌ ํ•ด์š”

https://twitter.com/jamiebuilds ๊ฐ€ ์ผ์‹œ ์ค‘๋‹จ๋œ ๊ฒƒ ๊ฐ™์•„์„œ ๋” ์ด์ƒ ์Šค๋ ˆ๋“œ๋ฅผ ์ฝ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. #3018 ์ด ๋ฌธ์ œ์™€ ๊ด€๋ จํ•˜์—ฌ ํ์‡„๋˜์—ˆ์œผ๋ฏ€๋กœ ๊ณ ๋ ค ์ค‘์ธ ๋Œ€์ฒด ์ ‘๊ทผ ๋ฐฉ์‹์ด ๋ฌด์—‡์ธ์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค.
์ด๊ฒƒ๋“ค์€ ์ด๋Ÿฌํ•œ ์‚ฌ์šฉ ์‚ฌ๋ก€ atm์— ๋Œ€ํ•œ next.js์˜ ์ตœ์‹  ๊ธฐ์ˆ /๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๊นŒ?
https://github.com/curran/nextjs-esm-example
https://github.com/wellcometrust/next-plugin-transpile-modules
https://github.com/martpie/next-transpile-modules
https://github.com/zeit/next.js/tree/canary/examples/with-yarn-workspaces

๋”ฐ๋ผ์„œ ์ €์ฒ˜๋Ÿผ IE11์„ ์ง€์›ํ•ด์•ผ ํ•˜๋Š” ํ”„๋กœ์ ํŠธ์—์„œ ์ž‘์—…ํ•˜๋Š” ๊ฒฝ์šฐ node_modules/ ๋‚ด๋ถ€์˜ ๋ชจ๋“  ์ฝ”๋“œ๋ฅผ ์‹ค์ œ๋กœ ๋ณ€ํ™˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. Next.js 7.x์—์„œ๋Š” ๋‹ค์Œ ์„ค์ •์„ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ ์ž˜ ์ž‘๋™ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋ถˆํ–‰ํžˆ๋„, ๊ธฐ๋ณธ ๋‚ด๋ณด๋‚ด๊ธฐ๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋ชจ๋“ˆ์ด ๋‹ค๋ฅธ ๋ชจ๋“ˆ์„ ๊ฐ€์ ธ์˜ค์ง€ ๋ชปํ–ˆ๋‹ค๋Š” ์˜ค๋ฅ˜์™€ ํ•จ๊ป˜ Next.js 8.x์—์„œ ์ž‘๋™์ด ์ค‘์ง€๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ node_modules/ ์˜ ์ฝ”๋“œ๋งŒ @babel/preset-env ๋กœ ๋ณ€ํ™˜ํ•˜๊ณ  ๋‹ค๋ฅธ ํ”Œ๋Ÿฌ๊ทธ์ธ์€ ์—†๋Š” Next.js 8.x์— ๋Œ€ํ•œ ์•„๋ž˜ ๊ตฌ์„ฑ์„ ์ƒ๊ฐํ•ด ๋ƒˆ์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ package.json ๋‚ด browserlist ์†์„ฑ์„ ์„ค์ •ํ•˜์—ฌ ๊ฒฐํ•ฉ๋ฉ๋‹ˆ๋‹ค.

  "browserslist": "defaults, IE >= 11, EDGE >= 14, Safari >= 11, Chrome >= 41, Firefox >= 52",

๋‹ค์Œ 7.x

next.config.js

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.js$/,
      include: /node_modules/,
      use: [
        options.defaultLoaders.babel,
      ],
    })

    return config
  },
}

Next.js 8.x

next.config.js

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.js$/,
      include: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-syntax-dynamic-import'],
        },
      },
    })

    return config
  },
}

๋ถˆํ–‰ํžˆ๋„ ์•„์ง ์ด ์„ค์ •์—์„œ @babel/plugin-transform-runtime ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์ง€ ๋ชปํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ์—์„œ ๊ฝค ๋งŽ์€ ๋„์šฐ๋ฏธ๊ฐ€ ๋‚˜์˜ฌ ๊ฒƒ์ž…๋‹ˆ๋‹ค ๐Ÿ˜ž gzip์ด ์ฒ˜๋ฆฌํ•ด ์ฃผ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค ๐Ÿ˜† ๐Ÿ˜‚


Next.js๊ฐ€ node_modules/ ๋ฅผ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๋ณ€ํ™˜ํ•˜์—ฌ browserlist ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ์ •๋ง ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ธฐ์—… ์‚ฌ์šฉ์ž๊ฐ€ ์žˆ๋Š” ๋Œ€๊ทœ๋ชจ ์‚ฌ์ดํŠธ๋Š” ์ด์ „ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ œ๋Œ€๋กœ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด ์ด์— ์˜์กดํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

next-transpile-modules (@jamesgorrie์˜ ๋ฉ‹์ง„ ์ž‘์—…์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•จ)์˜ ๊ด€๋ฆฌ์ž๋กœ์„œ ์—ฌ๊ธฐ์—์„œ ์ด ๋ฌธ์ œ์— ์ง๋ฉดํ•œ ์‚ฌ๋žŒ์„ ๋„์šธ ์ˆ˜ ์žˆ์–ด ๊ธฐ์ฉ๋‹ˆ๋‹ค.

์ €๋Š” ์ด ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜์—ฌ 1๋…„ ์ด์ƒ ์ „๋ฌธ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•ด ์™”์œผ๋ฉฐ ์ง€๊ธˆ๊นŒ์ง€ ํ›Œ๋ฅญํ•˜๊ฒŒ ์ž‘๋™ํ–ˆ์Šต๋‹ˆ๋‹ค.

Next.js์˜ ๊ธฐ๋ณธ ์ง€์›์€ ๋ฌผ๋ก  ํ›Œ๋ฅญํ•  ๊ฒƒ์ด๋ฉฐ ์ด ๊ธฐ๋Šฅ์„ next ํŒจํ‚ค์ง€์— ํ†ตํ•ฉํ•˜๋Š” ๋ฐ ๋„์›€์„ ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” Tim์ด ์‹œ๋„ํ•˜๊ณ  ์‹ถ์€ ๋ช‡ ๊ฐ€์ง€ ์•„์ด๋””์–ด๊ฐ€ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์ง€๋งŒ ์–ด์จŒ๋“ .

๊ฑด๋ฐฐ!

@martpie ๋น ๋ฅด๊ฒŒ ํ”„๋กœ์ ํŠธ๋ฅผ ์‚ดํŽด๋ณด์•˜์ง€๋งŒ _all_ ๋ชจ๋“ˆ์„ ๋น ๋ฅด๊ฒŒ ๋ณ€ํ™˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ€๋Šฅํ•œ๊ฐ€์š”? โ˜บ๏ธ

๋˜ํ•œ options.defaultLoaders.babel ํ•˜๊ณ  ์ด๋ฅผ babel loader๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Next.js 8.x๋กœ ๊ทธ๋ ‡๊ฒŒ ํ•  ๋•Œ ์ผ๋ถ€ ๋ชจ๋“ˆ์ด ๊ทธ ํ›„์— CJS ๋ชจ๋“ˆ๋กœ ์ œ๋Œ€๋กœ ์ธ์‹๋˜์ง€ ์•Š๊ณ  ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ๊ฐ€์ ธ์˜ค์ง€ ๋ชปํ•˜๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ:

./pages/_glamor.js
Attempted import error: 'css' is not exported from 'glamor'.

./components/project-selector.js
Attempted import error: 'react-select/lib/Async' does not contain a default export (imported as 'AsyncSelect').

./node_modules/react-select/dist/react-select.esm.js
Attempted import error: 'react-input-autosize' does not contain a default export (imported as 'AutosizeInput').

./pages/signup/full.js
Attempted import error: 'react-select/lib/Creatable' does not contain a default export (imported as 'CreatableSelect').

./components/markdown-editor.js
Attempted import error: 'react-simplemde-editor' does not contain a default export (imported as 'SimpleMDEEditor').

./components/pagination.js
Attempted import error: 'react-js-pagination' does not contain a default export (imported as 'UpstreamPagination').

./node_modules/react-google-recaptcha/lib/es/recaptcha-wrapper.js
Attempted import error: 'react-async-script' does not contain a default export (imported as 'makeAsyncScriptLoader').

./pages/_glamor.js
Attempted import error: 'rehydrate' is not exported from 'glamor'.

๊ทธ๋ž˜์„œ preset-env ์‚ฌ์šฉํ•˜์—ฌ ์ฝ”๋“œ๋ฅผ ๋ณ€ํ™˜ํ•˜๊ณ  Next.js ๊ด€๋ จ ๋ณ€ํ™˜์„ ๊ฑด๋„ˆ๋›ฐ๋Š” node_modules/ ๋Œ€ํ•œ ์‚ฌ์šฉ์ž ์ง€์ • babel ๊ตฌ์„ฑ์„ ์ œ๊ณตํ•˜๋„๋ก ์ „ํ™˜ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด ์ ‘๊ทผ ๋ฐฉ์‹์— ๋Œ€ํ•ด ์–ด๋–ป๊ฒŒ ์ƒ๊ฐํ•˜์‹ญ๋‹ˆ๊นŒ?

๊ฑด๋ฐฐ ๐Ÿป

@LinusU transpileModules: ['(.*?)'] ์‹œ๋„ํ•ด๋ณด๊ณ  ์ž‘๋™ํ•˜๋Š”์ง€ ์•Œ๋ ค์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

๊ทธ๋Ÿฌ๋‚˜ ํ–ฅํ›„ ์ฃผ์š” ๋ฆด๋ฆฌ์Šค์—์„œ๋Š” ์ž‘๋™ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ฃผ์˜ํ•˜์‹ญ์‹œ์˜ค.

๋” ์ผ๋ฐ˜์ ์œผ๋กœ, ์ „์ฒด node_modules ํด๋”๋ฅผ ํŠธ๋žœ์ŠคํŒŒ์ผํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค("๋งค์šฐ ๊ถŒ์žฅํ•˜์ง€ ์•Š์Œ" ์ฐธ์กฐ). ์ปดํŒŒ์ผํ•˜๋Š” ๋ฐ ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๊ณ  ํŒจํ‚ค์ง€๋Š” ES3 ํ˜ธํ™˜ ์ฝ”๋“œ(IE11 ํ˜ธํ™˜ ๊ฐ€๋Šฅ)๋ฅผ ์ œ๊ณตํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

ํ•„์š”ํ•œ ๋ชจ๋“ˆ๋งŒ ํŠธ๋žœ์ŠคํŒŒ์ผํ•˜์„ธ์š”! ( lodash-es , ๋กœ์ปฌ ๋ชจ๋“ˆ ๋“ฑ...)

ํŒจํ‚ค์ง€๋Š” ES3 ํ˜ธํ™˜ ์ฝ”๋“œ๋ฅผ ์ œ๊ณตํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค(IE11 ํ˜ธํ™˜ ๊ฐ€๋Šฅ).

์ด๊ฒƒ์€ ๋‚ด๊ฐ€ ๋ณธ ํ˜„์‹ค์ด ์•„๋‹ˆ๋ฉฐ ์‹ค์ œ๋กœ ๋™์˜ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ชจ๋“ˆ ์ž‘์„ฑ์ž๋Š” ๋‚ด๊ฐ€ ๋Œ€์ƒ์œผ๋กœ ํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ •ํ™•ํžˆ ์•Œ์ง€ ๋ชปํ•˜๋ฉฐ ์ด์ „ ์ฝ”๋“œ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฒฝ์šฐ ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๋Œ€์ƒ์œผ๋กœ ํ•˜๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ์ž ์žฌ์ ์œผ๋กœ ๋ถˆ์ด์ต์„ ์ค„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ปดํŒŒ์ผํ•˜๋Š” ๋ฐ ์˜์›ํžˆ ๊ฑธ๋ฆด ๊ฒƒ์ž…๋‹ˆ๋‹ค

์‹œ์ž‘ํ•  ๋•Œ ์•ฝ๊ฐ„ ๋Š๋ฆฌ์ง€๋งŒ ๊ทธ ํ›„์—๋Š” ์บ์‹œ๋œ ๊ฒƒ ๊ฐ™๊ณ  ํŠน์ • ํŽ˜์ด์ง€๋ฅผ ๋ณ€๊ฒฝํ•  ๋•Œ ๊ฑฐ์˜ ์ฆ‰์‹œ ๋‹ค์‹œ ๋กœ๋“œ๋˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•„์š”ํ•œ ๋ชจ๋“ˆ๋งŒ ํŠธ๋žœ์ŠคํŒŒ์ผํ•˜์„ธ์š”!

์ด๋ฅผ ์œ„ํ•ด์„œ๋Š” IE11๊ณผ ํ˜ธํ™˜๋˜๋Š” ํŒจํ‚ค์ง€์™€ ํ˜ธํ™˜๋˜์ง€ ์•Š๋Š” ํŒจํ‚ค์ง€๋ฅผ ์ •ํ™•ํžˆ ์•Œ์•„์•ผ ํ•˜๋ฉฐ ์ข…์†์„ฑ(์ผ์‹œ์ ์ธ ์ข…์†์„ฑ ํฌํ•จ)์ด ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค ์ด ์ •๋ณด๋ฅผ ์ตœ์‹  ์ƒํƒœ๋กœ ์œ ์ง€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๐Ÿค” ํ˜„์‹ค์ ์ด์ง€ ๋ชปํ•˜๋‹ค.

์ค‘์š”ํ•œ ๊ฒƒ์€ package.json module ์ œ๊ณต๋˜๋Š” ESM ์ง„์ž…์ ์€ ์ผ๋ฐ˜์ ์œผ๋กœ ํŠธ๋ฆฌ ์‰์ดํ‚น์„ ์œ„ํ•œ ES6 ๊ฐ€์ ธ์˜ค๊ธฐ/๋‚ด๋ณด๋‚ด๊ธฐ๊ฐ€ ํฌํ•จ๋œ ES5๋ผ๋Š” ๊ฒƒ ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ด๊ฒƒ์€ ๋‹ฌ๋ฆฌ ๋ช…์‹œ๋˜์ง€ ์•Š๋Š” ํ•œ ํŠธ๋žœ์ŠคํŒŒ์ผ๋Ÿฌ(Babel)๊ฐ€ ์•„๋‹Œ ๋ฒˆ๋“ค๋Ÿฌ(Webpack)์— ๋Œ€ํ•œ ์ž‘์—…์ž…๋‹ˆ๋‹ค. ์ž˜ ๊ด€๋ฆฌ๋˜๋Š” ๋งŽ์€ ํŒจํ‚ค์ง€์—๋Š” ์ด๋ฏธ ESM ์ง„์ž…์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด OP๊ฐ€ ์–ธ๊ธ‰ํ•œ Redux์˜ ๊ฒฝ์šฐ redux/es ์ž…๋‹ˆ๋‹ค.

next.config.js : module.exports = { webpack: (config ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋ ค๋Š” ๊ฒฝ์šฐ config.module.rules ์— ๋ช‡ ๊ฐ€์ง€ ์‚ฌํ•ญ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ทœ์น™ ์ค‘ ํ•˜๋‚˜๋ฅผ ๋ณ€๊ฒฝํ•˜๊ฑฐ๋‚˜ ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๊นŒ? :

  { loader: 'babel-loader',
    include: '/Users/me/gh/guide/node_modules/next/dist/pages',
    options: 
     { babelrc: false,
       cacheDirectory: true,
       sourceMaps: 'both',
       plugins: [Object] } },
  { test: /\.js(\?[^?]*)?$/,
    loader: 'babel-loader',
    include: 
     [ '/Users/me/gh/guide',
       '/Users/me/gh/guide/node_modules/next/dist/pages' ],
    exclude: [Function: exclude],
    query: 
     { babelrc: true,
       cacheDirectory: true,
       sourceMaps: 'both',
       presets: [] } } ]

์ œ์•ˆ๋œ ๋” ๊ฐ„๋‹จํ•œ ๊ตฌ๋ฌธ์„ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋ฅผ ์œ„ํ•ด ์ž˜ ์ž‘๋™

{
    test: /\.js(\?[^?]*)?$/,
    loader: 'babel-loader',
    include: [
        path.resolve(__dirname, './node_modules/next/dist/pages'),
    ],
    query: {
        cacheDirectory: true,
        sourceMaps: 'both',
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-proposal-object-rest-spread']
    }
},

๋‚˜๋Š” Lerna ๋ชจ๋…ธ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด ๋ฌธ์ œ์— ๋ถ€๋”ช์ณค๊ณ  ์›์ธ์ด ๋ฌด์—‡์ธ์ง€์— ๋Œ€ํ•ด ๋จธ๋ฆฌ๋ฅผ ๊ธ์ ์˜€์Šต๋‹ˆ๋‹ค. ์˜ค๋ฅ˜๋Š” webpack์—์„œ ๋ฐœ์ƒํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋กœ๋”๊ฐ€ ๋ˆ„๋ฝ๋œ ๊ฒƒ ์™ธ์—๋Š” ๋„์›€์ด ๋˜์ง€ ์•Š๋Š” ์ข‹์€ ์„ธ๋ถ€ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ณ ๋ง™๊ฒŒ๋„ ์ด github ๋ฌธ์ œ๋ฅผ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค!

์ด ๋ฌธ์ œ๋ฅผ ๊ฒ€์ƒ‰ํ•˜๊ณ  Lerna๋„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” ๋‹ค๋ฅธ ์‚ฌ๋žŒ์„ ์œ„ํ•ด ์—ฌ๊ธฐ์— ๋‚ด ์†”๋ฃจ์…˜์„ ๋‚จ๊ธธ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์†Œ์Šค๋ฅผ dist ๋””๋ ‰ํ† ๋ฆฌ๋กœ ๋ณ€ํ™˜ํ•˜๊ณ  ๋งํฌํ•  ๋•Œ dist ๋””๋ ‰ํ† ๋ฆฌ๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋„๋ก Lerna์— ์ง€์‹œํ•˜๋Š” ๊ณต์œ  ํŒจํ‚ค์ง€์— ๋Œ€ํ•œ ์‚ฌ์ „ ๊ณต๊ฐœ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž‘์„ฑํ•˜์‹ญ์‹œ์˜ค.

// package.json
"main": "dist",
"scripts": {
  // I'm using the react-app preset because it's easy
  "prepublish": "babel --presets react-app --plugins @babel/plugin-transform-modules-commonjs src --out-dir dist"
},
// This instructs Lerna to use dist when symlinking
"publishConfig": {
  "directory": "dist"
}

์ด์ œ lerna bootstrap ํ•  ๋•Œ ์‚ฌ์ „ ๊ฒŒ์‹œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•˜๊ณ  ์†Œ์Šค๋ฅผ ๋ณ€ํ™˜ํ•˜์—ฌ Next์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

lerna ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ next-transpile-modules๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‹ฌ๋ณผ๋ฆญ ๋งํฌ๋ฅผ ๋งŒ๋“ค์–ด ํŠธ๋žœ์ŠคํŒŒ์ผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. lerna ์™€ ํ•จ๊ป˜ ํ•ด๋‹น ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋ฌธ์„œ ๋งจ ์•„๋ž˜์— ๋‚˜์™€ ์žˆ์Šต๋‹ˆ๋‹ค.

NextJs ์•ฑ์—์„œ ์ฝ”๋“œ ๊ณต์œ ๋ฅผ ๊ฒ€์ƒ‰ํ•˜๋Š” ์‚ฌ๋žŒ์„ ์œ„ํ•ด ๋ชจ๋…ธ ์ €์žฅ์†Œ์—์„œ ์—ฌ๋Ÿฌ NextJs ์•ฑ ๊ฐ„์— React ๊ตฌ์„ฑ ์š”์†Œ์™€ ์œ ํ‹ธ๋ฆฌํ‹ฐ๋ฅผ ๊ณต์œ ํ•˜๋ ค๊ณ  ํ•  ๋•Œ @LinusU ์˜ ์†”๋ฃจ์…˜์ด ์ €์—๊ฒŒ ์‹ถ์Šต๋‹ˆ๋‹ค .

// next.config.js
const aliasPathsToResolve = [
    { name: 'components', path: path.resolve(__dirname, './components') },
    { name: 'Common', path: path.resolve(__dirname, '../../common/react/') },
]
module.exports = () => {
    return  {
        webpack(config, { defaultLoaders }) {
            config.module.rules.push({
            test: /\.(js|jsx)$/,
            include: [path.resolve(__dirname, '../../common/react/')],
            use: [defaultLoaders.babel],
        })

            /** Resolve aliases */
        aliasPathsToResolve.forEach((module) => {
            config.resolve.alias[module.name] = module.path
        })
        }
    }
}

์ด ๊ฒŒ์‹œ๋ฌผ์„ ์ž‘์„ฑํ•˜๋Š” ์‹œ์ ์—์„œ ์ตœ์‹  ๋ฒ„์ „์˜ NextJ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

@Lwdthe1 ์ฝ”๋“œ๋ฅผ ์‹œ๋„ํ–ˆ๋Š”๋ฐ ์ฒ˜์Œ์— ๋‹ค์Œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

TypeError: Cannot read property 'then' of undefined
    at getBaseWebpackConfig (/c2/wiz-frontend/packages/pipeline-view/node_modules/next/dist/build/webpack-config.js:85:25)
    at async Promise.all (index 0)
    at async HotReloader.start (/c2/wiz-frontend/packages/pipeline-view/node_modules/next/dist/server/hot-reloader.js:14:1675)
    at async DevServer.prepare (/c2/wiz-frontend/packages/pipeline-view/node_modules/next/dist/server/next-dev-server.js:7:223)
    at async /c2/wiz-frontend/packages/pipeline-view/node_modules/next/dist/cli/next-dev.js:22:359

์•ฝ๊ฐ„์˜ ์กฐ์ •์„ ์ˆ˜ํ–‰ํ•˜๊ณ  ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋๋ƒˆ์Šต๋‹ˆ๋‹ค.

const path = require("path");

const libPath = "../components/src"
const aliasPathsToResolve = [
  { name: "Common", path: path.resolve(__dirname, libPath) }
];

module.exports = {
  webpack: (config, { defaultLoaders }) => {
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      include: [path.resolve(__dirname, libPath)],
      use: [defaultLoaders.babel]
    });

    /** Resolve aliases */
    aliasPathsToResolve.forEach(module => {
      config.resolve.alias[module.name] = module.path;
    });
    return config
  }
};

๊ทธ๋Ÿฌ๋‚˜ ๋˜ ๋‹ค๋ฅธ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

export { default as NavBar } from "./NavBar/NavBar"
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1055:16)
    at Module._compile (internal/modules/cjs/loader.js:1103:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1159:10)
....

์ด๊ฒƒ์€ #2850๊ณผ #883์—์„œ ์ „์— ์ง๋ฉดํ–ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ์œ ์ผํ•œ ํ•ด๊ฒฐ์ฑ…์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. https://github.com/martpie/next-transpile-modules#but -i-really-need-to-make-it-work-with-lerna

๋‚ด๊ฐ€ ๋“ค์€ ๋ฐ”์— ๋”ฐ๋ฅด๋ฉด Next.js๊ฐ€ ์ด ๋ฌธ์ œ๋ฅผ ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ•  ๊ณ„ํš์ธ์ง€ ๊ณง RFC๊ฐ€ ๋ฐœํ‘œ๋  ๊ฒƒ์ด์ง€๋งŒ ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ์ง€๊ธˆ ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ https://github.com/ ์—์„œ ๋‚ด ์†”๋ฃจ์…˜์„ npm์— ๊ฒŒ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค.

    "next": "npm:@sheerun/[email protected]",

next.config.js ๋‹ค์Œ:

  babelIncludeRegexes: [/turf/],

(์ œ ๊ฒฝ์šฐ์—๋Š” ๋ชจ๋“  ์ž”๋”” ํŒŒ์ผ์„ babel๋กœ ๋ฏธ๋ฆฌ ์ปดํŒŒ์ผํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค)

์ด ๋ฌธ์ œ์— ์ง„์ „์ด ์žˆ์Šต๋‹ˆ๊นŒ?

next.js 9.2.0์„ ์‚ฌ์šฉํ•˜์ง€๋งŒ babelIncludeRegexes ์˜ต์…˜์ด ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ์— ์ง„์ „์ด ์žˆ์Šต๋‹ˆ๊นŒ?

next-transpile-modules ๋Š” ์ด ๋ฌธ์ œ๋ฅผ ์ •ํ™•ํžˆ ํ•ด๊ฒฐํ•˜๋Š” ๊ฒƒ์„ ๋ชฉํ‘œ๋กœ ํ•ฉ๋‹ˆ๋‹ค. ์‹œ๋„ํ•ด ๋ณด์…จ์Šต๋‹ˆ๊นŒ?

์•ˆ๋…•ํ•˜์„ธ์š” @martpie ๋‹˜

์ด๋ฏธ ๋‚ด ๋ฌธ์ œ .babelrc ํŒŒ์ผ ํŽธ์ง‘์„ ํ•ด๊ฒฐํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด ๋ฌธ์ œ๋ฅผ ์ฐธ์กฐ

๊ณ ๋งˆ์›Œ

@martpie next-transpile-modules ์žˆ์ง€๋งŒ ์—ฌ์ „ํžˆ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ๋นŒ๋“œํ•˜๋Š” ๋™์•ˆ ์•„๋ž˜ ์˜ค๋ฅ˜์— ์ง๋ฉดํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ณต์œ  ์ฝ”๋“œ๋ฒ ์ด์Šค์™€ ํ•จ๊ป˜ monorepo๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. '@myapp/shared/components/componentname.js'์™€ ๊ฐ™์€ ๊ณต์œ ์—์„œ ๊ตฌ์„ฑ ์š”์†Œ์— ์•ก์„ธ์Šคํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. nextjs 9.x ๋ฐ ์‚ฌ์šฉ์ž ์ •์˜ next.config.js ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ค๋ฅ˜
`
๋ชจ๋“ˆ ๊ตฌ๋ฌธ ๋ถ„์„ ์‹คํŒจ: ์˜ˆ๊ธฐ์น˜ ์•Š์€ ํ† ํฐ(12:4)
์ด ํŒŒ์ผ ์œ ํ˜•์„ ์ฒ˜๋ฆฌํ•˜๋ ค๋ฉด ์ ์ ˆํ•œ ๋กœ๋”๊ฐ€ ํ•„์š”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ ์ด ํŒŒ์ผ์„ ์ฒ˜๋ฆฌํ•˜๋„๋ก ๊ตฌ์„ฑ๋œ ๋กœ๋”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. https://webpack.js.org/concepts#loaders ์ฐธ์กฐ
| const ์Šคํ”ผ๋„ˆ = ์†Œํ’ˆ => {
| const renderDefaultSpinner = (์Šคํ”ผ๋„ˆ ํด๋ž˜์Šค, { ...๊ธฐํƒ€ }) => (
>


| );
|

๋นŒ๋“œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.
์˜ค๋ฅ˜: > ์›นํŒฉ ์˜ค๋ฅ˜๋กœ ์ธํ•ด ๋นŒ๋“œ ์‹คํŒจ
`

next.config.js
const withTM = require('next-transpile-modules')(['<strong i="26">@myapp</strong>']); module.exports = withPlugins([withTM, withBundleAnalyzer], { ... }

์ œ๊ฐ€ ์—ฌ๊ธฐ์„œ ๋ญ˜ ์ž˜๋ชปํ•˜๊ณ  ์žˆ๋Š”์ง€ ๋„์™€์ฃผ์„ธ์š”.

@raghav1086 ๋ฆฌํฌ์ง€ํ† ๋ฆฌ ์—์„œ ๋ฌธ์ œ๋ฅผ ์—ด โ€‹โ€‹์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ;) ์—ฌ๊ธฐ ์‚ฌ๋žŒ๋“ค์˜ ์†Œ์Œ์„ ํ”ผํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

+1

๋‚ด ํ”„๋กœ์ ํŠธ์— src/ ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ ์žˆ๊ณ  ๋ช‡ ๊ฐ€์ง€ ๋‹ค๋ฅธ nextjs ์•ฑ์—์„œ ์žฌ์‚ฌ์šฉํ•˜๋Š” ๋ช‡ ๊ฐ€์ง€ ๊ณตํ†ต ์œ ํ‹ธ๋ฆฌํ‹ฐ/๋ž˜ํผ๋ฅผ ๋‚ด๋ณด๋‚ด๋Š” ์Šคํƒ€ํ„ฐ ํ”„๋ ˆ์ž„์›Œํฌ์— ๋Œ€ํ•ด lib/ ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค(๋‚ด ์‹œ์ž‘์ ).

dev ์„œ๋ฒ„๋ฅผ ์‹œ์ž‘ํ•  ๋•Œ lib๊ฐ€ ์ธ์‹๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. lib/์˜ ๋ชจ๋“  ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋กœ๋”๋ฅผ ๊ฑฐ์น˜์ง€ ์•Š๊ณ  ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

@Lwdthe1 ์˜ ๋ณ€ํ˜•๋œ ์†”๋ฃจ์…˜(https://github.com/zeit/next.js/issues/706#issuecomment-569041997)์„ ์‚ฌ์šฉํ•˜์—ฌ ์œ„์˜ ๋‚ด ์˜๊ฒฌ์—์„œ src ๋ฐ lib ๋ฌธ์ œ๋ฅผ ์ˆ˜์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. aliasPathsToResolve ๋ฐฐ์—ด์„ ๋ฐ˜๋ณตํ•˜๋Š” ๋Œ€์‹  config.resolve.modules ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ์ ์„ ์ œ์™ธํ•˜๊ณ  ๊ธฐ๋ณธ์ ์œผ๋กœ ๋™์ผํ•ฉ๋‹ˆ๋‹ค.

  webpack: (config, options) => {
    config.resolve.modules = [
      './src/',
      './lib/',
      'node_modules'
    ];

    config.module.rules.push({
      test: /\.(js|jsx)$/,
      include: [path.resolve(__dirname, './lib/')],
      use: [options.defaultLoaders.babel],
    });

์š”์ฆ˜ lerna, nextjs, babel์˜ ์ž‘๋™ ์†”๋ฃจ์…˜์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

๊ฐ€์ ธ์˜ค๊ธฐ ์ „์— ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋ฏธ๋ฆฌ ๋ณ€ํ™˜ํ•˜์ง€ ์•Š์œผ๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ์—ฌ๊ธฐ์—์„œ ๋ชจ๋“  ์†”๋ฃจ์…˜์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ ์–ด๋ ค์›€์„ ๊ฒช์—ˆ์Šต๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ์ผํ•  ์ˆ˜์—†๋Š” ๊ฒƒ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • next-transpile-modules .
  • ์‚ฌ์ „ ์„ค์ • ํ™˜๊ฒฝ ์„ค์ •์„ ์žฌ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
  • next-babel-loader include ๋ฐ exclude ๊ทœ์น™์„ ๊ฐ๊ฐ ํ†ต๊ณผ/์‹คํŒจ๋กœ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค.

@mikestopcontinues next-transpile-modules ๋Š” TypeScript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ฆ‰์‹œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@calebmpeterson ๊ณผ @martpie (๋ณด๊ณ  ๊ฐ‘๋‹ˆ๋‹ค! ๐Ÿ‘€). ๋‹ค์‹œ ํ”Œ๋Ÿฌ๊ทธ๋กœ ๋Œ์•„๊ฐ€์„œ ๋ฌธ์ œ๋Š” ํ•˜์œ„ ๋ชจ๋“ˆ์„ ์ฐธ์กฐํ•  ๋ฐฉ๋ฒ•์ด ์—†๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด '@mono/components' ํŒจํ„ด์€ '@mono/components/Div' ๋“ฑ์˜ ๊ฐ€์ ธ์˜ค๊ธฐ๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํŒจํ„ด์œผ๋กœ '@mono/components/Div'๋ฅผ ์ง€์ •ํ•ด๋„ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค... ๋ชจ๋“  ๊ณต์œ  ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•ด ๊ทธ๋ ‡๊ฒŒ ํ•˜๊ณ  ์‹ถ์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์ •๊ทœ์‹ ์ƒ์„ฑ์„ ๋ฆฌ๋ฒ„์Šค ์—”์ง€๋‹ˆ์–ด๋งํ•˜์—ฌ ์ผ์น˜ ํŒจํ„ด์„ ์ƒ์„ฑํ•˜๋ ค๊ณ  ์‹œ๋„ํ–ˆ์œผ๋ฉฐ ์ถœ๋ ฅ ์ •๊ทœ์‹์ด ์ž‘๋™ํ•˜๋Š” ๋™์•ˆ ๋‚ด๋ถ€์—์„œ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๋‹ค๋ฅธ ์ž‘์—…์ด ์ง„ํ–‰๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ด์ƒ์ ์œผ๋กœ๋Š” ๋ชจ๋“  ๊ฒƒ์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด '@mono'๋ฅผ ์ง€์ •ํ•˜๊ณ , ๋‚ด package.json์„ ๋‚ด ๊ฐ ์•ฑ์ด ์˜์กดํ•˜๋Š” ๋‹จ์ผ ์†Œ์Šค ์†Œ์Šค๋กœ ๋‚จ๊ฒจ๋‘๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ํ•˜์œ„ ๋ชจ๋“ˆ์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ๋„๋ก ๋‚ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ๋ชจ๋“  ๋‹จ์ผ ํ•ญ๋ชฉ์„ ๊ฐ€์ ธ์˜ค๊ฑฐ๋‚˜ ๋‚ด๋ณด๋‚ด๋Š” ์ธ๋ฑ์Šค ํŒŒ์ผ์„ ์œ ์ง€ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์„ ํ”ผํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

๋Œ์•„๊ฐ€์„œ rootMode: 'upward' ํ†ตํ•ด next-babel-loader ๋ฅผ ์ „๋‹ฌํ•˜์—ฌ babel์ด ํŠธ๋žœ์ŠคํŒŒ์ผ ๋…ผ๋ฆฌ๋ฅผ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ํ˜„์žฌ ๋ฌธ์ œ๊ฐ€ ์™„์ „ํžˆ ํ•ด๊ฒฐ๋  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์–ด์ฉŒ๋ฉด ์ด๊ฒƒ์€ ๋‹ค๋ฅธ Next ๊ด€๋ จ ๋ฌธ์ œ๋ฅผ ์—ด โ€‹โ€‹์ˆ˜ ์žˆ์ง€๋งŒ ๋ฌธ์ œ์˜ ๊ทผ์›์€ Next๊ฐ€ webpack๊ณผ babel์— ์–ฝํžŒ ๋น„์ •ํ˜•์ ์ธ ๋ฐฉ์‹์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก  babel-loader ๋ฅผ Next์˜ ์ถ”๊ฐ€ ๋กœ์ง๊ณผ ๋ณ„๋„๋กœ ๋‚จ๊ฒจ๋‘๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์„๊นŒ์š”?

next-transpile-modules ์ „๋ฉด์— ๋Œ€ํ•œ ์—…๋ฐ์ดํŠธ์ž…๋‹ˆ๋‹ค. ์˜ค๋ฅ˜๋ฅผ ์ž˜๋ชป ์ง„๋‹จํ–ˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž ์ •์˜ .babelrc ๊ตฌ์„ฑ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ ์ด ๋ฐฉ๋ฒ•(์ƒ‰์ธ ๋˜๋Š” ํ•˜์œ„ ๋ชจ๋“ˆ)์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ€์ ธ์˜ค๊ธฐ๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž ์ •์˜ ์„ค์ •์€ ํ•„์š”ํ•œ ์ฝ”๋“œ์— ์ ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋‹ค์‹œ rootMode: 'upward' ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.

@mikestopcontinues next-transpile-modules ์™€ ํ•จ๊ป˜ babel.config.js (global config)๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋ฉฐ .babelrc (local config)๊ฐ€ ์•„๋‹ˆ๋ผ FAQ์— ์„ค๋ช…๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค ;)

@martpie ๋‚ด๊ฐ€ ์–ผ๋งˆ๋‚˜ ๋ถ€๋„๋Ÿฌ์šด์ง€

next-transpile-modules๊ฐ€ ๋‚˜๋ฅผ ์œ„ํ•ด React๋ฅผ ๊นจ๋œจ๋ ธ์Šต๋‹ˆ๋‹ค. 3๊ฐœ์˜ ์˜ˆ์ œ ๋ชจ๋“ˆ์„ ํŠธ๋žœ์ŠคํŒŒ์ผํ•˜๋Š” ๋™์•ˆ ์ž˜๋ชป๋œ ํ›„ํฌ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ๋ฉ”์‹œ์ง€๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ๊ฐ€์žฅ ์ข‹์€ ๊ตฌ์„ฑ์ด ๋ฌด์—‡์ธ์ง€ ๋‹ค์‹œ ๋ฐ˜๋ณตํ•ด์„œ ๋ฒˆ์—ญ์„ ์ž‘๋™ํ•˜๋„๋ก ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? babel.config.js์— ์ž‘์„ฑํ•ด์•ผ ํ•˜๋Š” ๋‚ด์šฉ์„ ์ดํ•ดํ•˜์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.

@masbaehr ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ next.config ์„ค์ •์— next-transpile-modules ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

์œ ์ผํ•œ ๋ฌธ์ œ๋Š” next-transpile-modules ๊ฐ€ Yarn 2 pnp๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

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