Razzle: ๋ž˜์ฆ 4.0์œผ๋กœ ๊ฐ€๋Š” ๊ธธ

์— ๋งŒ๋“  2020๋…„ 08์›” 08์ผ  ยท  10์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: jaredpalmer/razzle

razzle 4.0์— ๋ฌด์—‡์ด ๋“ค์–ด๊ฐ€์•ผ ํ• ๊นŒ์š”? ์นด๋‚˜๋ฆฌ์•„ ๋ธŒ๋žœ์น˜์— ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์„ ๋งŽ์ด ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ฐ€์ง€(์นด๋‚˜๋ฆฌ์•„)

๋ถ„๊ธฐ ๋ฌธ์„œ(์นด๋‚˜๋ฆฌ์•„)

๋‚ด๊ฐ€ ํ˜„์žฌ 4.0์— ์ค€๋น„ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ๊ธฐ๋Šฅ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • ์›นํŒฉ 5 ์ง€์›(์ค€๋น„)
  • ์ƒˆ๋กœ์šด babel ๊ตฌ์„ฑ, ์‚ฌ์ „ ์„ค์ •์— ๋Œ€ํ•œ ์˜ต์…˜์„ ์ˆ˜์ •ํ•˜๊ณ  .babelrc์— ์‚ฌ์ „ ์„ค์ •์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ด ์žˆ์œผ๋ฏ€๋กœ next.js์—์„œ ๊ฐ€์ ธ์˜จ ๋ชจ๋“  ๊ฒƒ์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๊ตฌ์„ฑํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค(์ค€๋น„๋˜์—ˆ์ง€๋งŒ ๋” ๋งŽ์€ ๋ˆˆ์ด ํ•„์š”ํ•จ).
  • ๋” ๋งŽ์€ ํ›„ํฌ, modifyPaths, razzle.config.js์˜ ๊ธฐ๋ณธ๊ฐ’๊ณผ ํ•จ๊ป˜ ์ œ๊ณต๋˜๋Š” ์ƒˆ ์˜ต์…˜ ํ‚ค๋ฅผ ์ˆ˜์ •ํ•˜๊ธฐ ์œ„ํ•œ modifyOptions, ์›นํŒฉ ๊ตฌ์„ฑ์— ์‚ฌ์šฉ๋  ์˜ต์…˜์„ ์ˆ˜์ •ํ•˜๊ธฐ ์œ„ํ•œ modifyWebpackOptions, ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ์ด์ „์— ์ˆ˜ํ–‰ํ•œ ๊ฒƒ๊ณผ ๋™์ผํ•œ modifyWebpackConfig, modifyJestConfig๊ฐ€ ์žˆ๋Š” ์ƒˆ๋กœ์šด razzle ํ”Œ๋Ÿฌ๊ทธ์ธ ์‹œ์Šคํ…œ jest ๊ตฌ์„ฑ์„ ์ˆ˜์ •ํ•ฉ๋‹ˆ๋‹ค. ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ๊ณ ๋„๋กœ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ๋„๋ก ๋™์ผํ•œ ๊ธฐ๋Šฅ์ด razzle.config.js์— ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค. (์ค€๋น„๋˜์—ˆ์ง€๋งŒ ๋” ๋งŽ์€ ๋ˆˆ์ด ํ•„์š”ํ•จ)
  • ๋ฐ˜์‘ ์ƒˆ๋กœ ๊ณ ์นจ์— ๋Œ€ํ•œ ์‹คํ—˜ ์ง€์›(์ค€๋น„)
  • ๊ตฌ์„ฑ ์•ฝ์† ๊ธฐ๋ฐ˜ ๋งŒ๋“ค๊ธฐ(์ค€๋น„)
  • ์ •์  ์‚ฌ์ดํŠธ๋ฅผ ๋‚ด๋ณด๋‚ด๊ธฐ ์œ„ํ•ด razzle ๋‚ด๋ณด๋‚ด๊ธฐ ์ถ”๊ฐ€(์ค€๋น„๋จ)
  • ์™ธ๋ถ€๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ์ƒˆ๋กœ์šด ๋ฐฉ๋ฒ•(์ค€๋น„๋จ)
  • ๋‚ด์žฅํ˜• ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ง€์›(์ค€๋น„)
  • ์ตœ์ ํ™”์˜ splitChunk ๊ตฌ์„ฑ(์ค€๋น„๋˜์—ˆ์ง€๋งŒ ๋” ๋งŽ์€ ๋ˆˆ์ด ํ•„์š”ํ•จ)
  • ๋นŒ๋“œ ํ•ด์‹œ ๋Œ€์‹  contenthash ์‚ฌ์šฉ(์ค€๋น„๋จ)

์ง€๊ธˆ ์‹œ๋„ํ•˜๋ ค๋ฉด:

npx create-razzle-app<strong i="23">@canary</strong> testing --ignore-existing
cd testing
yarn add [email protected] --dev
yarn start
yarn build
yarn start:prod
yarn test

๋ฌธ์„œ ๋ณด๊ธฐ

https://github.com/jaredpalmer/razzle/releases/tag/v4.0.0-canary.0
https://github.com/jaredpalmer/razzle/releases/tag/v4.0.0-canary.1
https://github.com/jaredpalmer/razzle/releases/tag/v4.0.0-canary.2

์ฐธ๊ณ : ๋ฒ„๊ทธ ์˜ˆ์ƒ ;)

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

Razzle 4.0.1์ด ์ถœ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค!! ํ์‡„

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

์ด๊ฒƒ์ด ์ค€๋น„๋˜๊ธฐ๊นŒ์ง€ ์–ผ๋งˆ๋‚˜ ๊ฑธ๋ฆฝ๋‹ˆ๊นŒ? ์—…๊ทธ๋ ˆ์ด๋“œ ๊ฐ€์ด๋“œ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

์ด๊ฒƒ์„ ์‹œ๋„ํ•˜๊ธฐ๋ฅผ ๊ธฐ๋‹ค๋ฆด ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค ๐ŸŽ‰

๊ทธ๋ž˜์„œ, razzle 4.0์ด ์ •๋ง ๊ฐ€๊น์Šต๋‹ˆ๋‹ค. ์•ฝ์†ํ•ฉ๋‹ˆ๋‹ค :) anoyne์ด ์นด๋‚˜๋ฆฌ์•„๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ๋ˆˆ์— ๋„๋Š” ๋ฌธ์ œ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ๋„๋ก ์ตœ์‹  ๋ฒ„์ „์„ ์‚ฌ์šฉํ•ด ๋ณด์„ธ์š”.

์ด๋ฒˆ ์ฃผ์— ๊ณ„ํšํ–ˆ์ง€๋งŒ ์ถœํŒ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ์ฃผ ์›”์š”์ผ์— ์‹œ๋„ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ๋™์•ˆ ์นด๋‚˜๋ฆฌ์•„ 50์„ ์‹œ๋„ํ•˜์—ฌ ๊ดœ์ฐฎ์€์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค.

https://www.npmjs.com/package/razzle/v/4.0.1-canary.0 - ํŒจ์น˜ ๋ฒ”ํ”„์— ํ•„์š”

html-webpack-plugin์—์„œ ๋ฌธ์ œ๋ฅผ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค. 4.0.1 ๋ฆด๋ฆฌ์Šค ์ „์— ์‚ดํŽด๋ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. peerDeps๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‰ฝ๊ฒŒ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ ์—ฌ์ „ํžˆ ์›”์š”์ผ์— ์ถœ์‹œ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ์นด๋‚˜๋ฆฌ์•„๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ์ตœ์‹  '4.0.1-canary.6'์„ ์‚ฌ์šฉํ•ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

html-webpack-plugin ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

https://razzle-git-canary-jared.vercel.app/getting-started#dependencies ์ฐธ์กฐ

์„ค์น˜ํ•˜๋Š” ๋ชจ๋“  ์ฝ”์–ด razzle ํŒจํ‚ค์ง€์— @4.0.1-canary.6์„ ์ถ”๊ฐ€ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

๋˜๋Š” ์ด๊ฒƒ์ด ๋‹น์‹ ์„ ์œ„ํ•ด ์ž‘๋™ํ•˜๋Š”์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค

npx create-razzle-app<strong i="11">@canary</strong> --verbose --example with-typeorm-graphql with-typeorm-graphql

์ด๋กœ ์ธํ•ด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š์œผ๋ฉด 4.0.1์„ ๋ฆด๋ฆฌ์Šคํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‚˜๋งŒ์ด ์•„๋‹ˆ๋ผ ๋‹น์‹ ์—๊ฒŒ ํšจ๊ณผ๊ฐ€ ์žˆ๋‹ค๋Š” ํ™•์ธ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. :)

๋ฆด๋ฆฌ์Šค 4.0.1-canary.15 . ์˜ˆ์ œ ์„ค์น˜/๋นŒ๋“œ/์‹œ์ž‘์„ ์œ„ํ•œ ์ถ”๊ฐ€๋œ ํ…Œ์ŠคํŠธ๋Š” ์›”์š”์ผ์— ๋ฆด๋ฆฌ์Šค๋ฅผ ๋‹ค์‹œ ์‹œ๋„ํ•ฉ๋‹ˆ๋‹ค.

Razzle 4.0.1์ด ์ถœ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค!! ํ์‡„

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