Razzle: razzle.config.js์—์„œ ๊ฒฝ๋กœ.js ๊ฐ’ ์žฌ์ •์˜

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

๋‚ด ํŒŒ์ผ ์‹œ์Šคํ…œ์ด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ณด์ด๋„๋ก ๋‚ด ์„œ๋ฒ„ ๋””๋ ‰ํ† ๋ฆฌ๋ฅผ ๋ฃจํŠธ๋กœ ์˜ฎ๊ธฐ๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

-/src
-์„ฌ๊ธฐ๋Š” ์‚ฌ๋žŒ
-...๋“ฑ.

razzle์„ ํŒŒํ—ค์ณ ๋ณด๋ฉด babel๊ณผ webpack์ด ๋‹ค์Œ์—์„œ ์ฝ”๋“œ ์œ„์น˜๋ฅผ ์–ป๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
  appBuildPublic: resolveApp('build/public'),
  appManifest: resolveApp('build/assets.json'),
  appPublic: resolveApp('public'),
  appNodeModules: resolveApp('node_modules'),
  appSrc: resolveApp('src'),
  appPackageJson: resolveApp('package.json'),
  appServerIndexJs: resolveApp('src'),
  appClientIndexJs: resolveApp('src/client'),
  testsSetup: resolveApp('src/setupTests.js'),
  appBabelRc: resolveApp('.babelrc'),
  appEslintRc: resolveApp('.eslintrc'),
  appRazzleConfig: resolveApp('razzle.config.js'),
  nodePaths: nodePaths,
  ownPath: resolveOwn('.'),
  ownNodeModules: resolveOwn('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
};

์œ ์ผํ•œ ๋ฌธ์ œ๋Š” ๊ฐ’์ด ํ•˜๋“œ ์ฝ”๋”ฉ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์žฌ์ •์˜ํ•  ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

razzle์—์„œ razle.config.js๋กœ resolveApp ํ•จ์ˆ˜๋ฅผ ๋ณต์‚ฌํ•˜์—ฌ ๋ถ™์—ฌ๋„ฃ๋Š” ๋ฐฉ๋ฒ•์„ ์ƒ๊ฐํ•ด ๋ƒˆ์Šต๋‹ˆ๋‹ค.

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

๊ทœ์น™์„ ๋ฐ˜๋ณตํ•˜๊ณ  ํ™˜๊ฒฝ ๋ฐ ๊ตฌ์„ฑ์— ๋”ฐ๋ผ include ์†์„ฑ์„ ๋‚ด ์‚ฌ์šฉ์ž ์ง€์ • ๊ฒฝ๋กœ๋กœ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค.

      appConfig.module.rules.map(rule => {
        if (rule.include && rule.test) {
          rule.include = [
            resolveApp('server'),
            resolveApp('src'),
          ];
        }
      })

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

์ข‹์€ ์ƒ๊ฐ์ธ ๊ฒƒ ๊ฐ™์œผ๋ฉด ๊ธฐ๊บผ์ด ์ด ์ž‘์—…์„ ํ•˜๊ณ  ์‹ถ์ง€๋งŒ, ์ด๋ฏธ ๋‚ด๊ฐ€ ๋†“์น˜๊ณ  ์žˆ๋Š” ํ•ด๊ฒฐ์ฑ…์ด ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋„์™€์ฃผ์„ธ์š” :)

enhancement

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

๋‚ด ๋ ˆ์ด๋”์—๋Š” ์ผ์ข…์˜ ๊ณ„ํš์ด ์žˆ์Šต๋‹ˆ๋‹ค ๐Ÿ˜€

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

ํ—! ๊ทธ๋ž˜์„œ ์—ฌ๊ธฐ ์˜คํ”ˆ ์†Œ์Šค์™€ ์ผ์ƒ ์—…๋ฌด ๋ฐ ์ƒํ™œ ์‚ฌ์ด์˜ ๊ฑฐ๋ž˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ด€๋ฆฌํ•ด์•ผ ํ•  ๊ฒƒ์ด ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— GitHub ๋ด‡์„ ์‚ฌ์šฉํ•˜์—ฌ ์—ฌ๊ธฐ์ €๊ธฐ์„œ ๋ช‡ ๊ฐ€์ง€๋ฅผ ์ž๋™ํ™”ํ•ฉ๋‹ˆ๋‹ค. ์ด ํŠน์ • GitHub ๋ด‡์€ ์ตœ๊ทผ ํ™œ๋™์ด ํ•œ๋™์•ˆ ์—†์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด๊ฒƒ์„ ๋ถ€์‹คํ•œ ๊ฒƒ์œผ๋กœ ํ‘œ์‹œํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ฉฐ์น  ๋™์•ˆ ๋” ์ด์ƒ ํ™œ๋™์ด ์—†์œผ๋ฉด ํ์‡„๋ฉ๋‹ˆ๋‹ค. ์ด ์ž‘์—…์„ ๊ฐœ์ธ์ ์œผ๋กœ ์‹ฌ๊ฐํ•˜๊ฒŒ ๋ฐ›์•„๋“ค์ด์ง€ ๋งˆ์‹ญ์‹œ์˜ค. ์ด๊ฒƒ์€ ์™„์ „ํžˆ ์ž๋™ํ™”๋œ ์ž‘์—…์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์‹ค์ˆ˜๋ผ๋ฉด ๋Œ“๊ธ€, DM, ์บ๋ฆฌ์–ด ๋น„๋‘˜๊ธฐ ๋˜๋Š” ์—ฐ๊ธฐ ์‹ ํ˜ธ๋ฅผ ๋ณด๋‚ด์ฃผ์‹ญ์‹œ์˜ค.

์ž˜. ๋‚ด ์„œ๋ฒ„๋ฅผ src ๋‚ด๋ถ€์˜ ์ƒˆ ์„œ๋ฒ„ ํด๋”๋กœ ์˜ฎ๊ฒผ์Šต๋‹ˆ๋‹ค.
๊ทธ๋Ÿฐ ๋‹ค์Œ razzle.config.js์—์„œ ์„œ๋ฒ„์— ๋Œ€ํ•œ ๊ตฌ์„ฑ์„ ํŽธ์ง‘ํ•ฉ๋‹ˆ๋‹ค.

config.entry.pop()
config.entry.push('./src/server')

๊ทธ๊ฒƒ์€ ์ž˜ ์ž‘๋™ํ•˜์ง€๋งŒ์ด ๋””๋ฒ„๊น… (--inspect) nodejs๊ฐ€ ์†์ƒ๋œ ํ›„์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค.

ํ—! ๊ทธ๋ž˜์„œ ์—ฌ๊ธฐ ์˜คํ”ˆ ์†Œ์Šค์™€ ์ผ์ƒ ์—…๋ฌด ๋ฐ ์ƒํ™œ ์‚ฌ์ด์˜ ๊ฑฐ๋ž˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ด€๋ฆฌํ•ด์•ผ ํ•  ๊ฒƒ์ด ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— GitHub ๋ด‡์„ ์‚ฌ์šฉํ•˜์—ฌ ์—ฌ๊ธฐ์ €๊ธฐ์„œ ๋ช‡ ๊ฐ€์ง€๋ฅผ ์ž๋™ํ™”ํ•ฉ๋‹ˆ๋‹ค. ์ด ํŠน์ • GitHub ๋ด‡์€ ์ตœ๊ทผ ํ™œ๋™์ด ํ•œ๋™์•ˆ ์—†์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด๊ฒƒ์„ ๋ถ€์‹คํ•œ ๊ฒƒ์œผ๋กœ ํ‘œ์‹œํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ฉฐ์น  ๋™์•ˆ ๋” ์ด์ƒ ํ™œ๋™์ด ์—†์œผ๋ฉด ํ์‡„๋ฉ๋‹ˆ๋‹ค. ์ด ์ž‘์—…์„ ๊ฐœ์ธ์ ์œผ๋กœ ์‹ฌ๊ฐํ•˜๊ฒŒ ๋ฐ›์•„๋“ค์ด์ง€ ๋งˆ์‹ญ์‹œ์˜ค. ์ด๊ฒƒ์€ ์™„์ „ํžˆ ์ž๋™ํ™”๋œ ์ž‘์—…์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์‹ค์ˆ˜๋ผ๋ฉด ๋Œ“๊ธ€, DM, ์บ๋ฆฌ์–ด ๋น„๋‘˜๊ธฐ ๋˜๋Š” ์—ฐ๊ธฐ ์‹ ํ˜ธ๋ฅผ ๋ณด๋‚ด์ฃผ์‹ญ์‹œ์˜ค.

๋น„ํ™œ์„ฑ ์ƒํƒœ๋กœ ์ธํ•ด ProBot์ด ์ž๋™์œผ๋กœ ๋‹ซ์•˜์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์‹ค์ˆ˜๋ผ๋ฉด Holler, ๊ทธ๋ฆฌ๊ณ  ์šฐ๋ฆฌ๋Š” ๊ทธ๊ฒƒ์„ ๋‹ค์‹œ ์—ด ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๋Š” ์ข…๋ฃŒ๋˜์–ด์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ ๋‹ค๋ฅธ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ ๋””๋ ‰ํ† ๋ฆฌ๋ฅผ ์„ค์ •ํ•˜๊ธฐ ์œ„ํ•ด ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋™์ผํ•œ ๋ฃจํŠธ ๋””๋ ‰ํ† ๋ฆฌ์—์„œ API ์ฝ”๋“œ๋ฅผ ํ˜ธ์ŠคํŒ…ํ•˜๋Š” ๊ฝค ํฐ ํ”„๋กœ์ ํŠธ์ด๊ณ  'src'๊ฐ€ ์ •๋ง ๋ชจํ˜ธํ•ฉ๋‹ˆ๋‹ค.

@nvma ๋‹ค๋ฅธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋””๋ ‰ํ† ๋ฆฌ๋ฅผ ์„ค์ •ํ•˜๋Š” ์˜ˆ๋ฅผ ์ œ๊ณตํ•ด ์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ? ๊ฐ์‚ฌ ํ•ด์š”!

์ด๊ฒƒ์€ ๊ฝค ์ค‘์š”ํ•œ ๋ฌธ์ œ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ตฌ์„ฑํ•ด์•ผ ํ•˜๋Š” _core_ ๋””๋ ‰ํ† ๋ฆฌ ๋ชฉ๋ก์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค๋ฉด ์ตœ๋Œ€ํ•œ ๋นจ๋ฆฌ PR์„ ์ œ์ถœํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ๋ฐ•์ฅ, ๋‚ด๊ฐ€ ๋งํ•˜๊ณ  ์‹ถ์ง€๋งŒ : build , src ํด๋ผ์ด์–ธํŠธ, src ์„œ๋ฒ„, ๋ฐ public .

๋‚ด razzle / webpack ๊ตฌ์„ฑ์—์„œ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

๋‚ด ๋ ˆ์ด๋”์—๋Š” ์ผ์ข…์˜ ๊ณ„ํš์ด ์žˆ์Šต๋‹ˆ๋‹ค ๐Ÿ˜€

๋‹ค๋ฅธ ์‚ฌ๋žŒ์—๊ฒŒ ์œ ์šฉํ•œ ๊ฒฝ์šฐ๋ฅผ ๋Œ€๋น„ํ•˜์—ฌ ์ตœ๊ทผ์— razzle.config.js ์—์„œ ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•ด์•ผ ํ–ˆ์œผ๋ฉฐ ์ž‘๋™ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

const defaultOptions = {
  server: null,
  client: null,
};

function modifyEntryPoints(baseConfig, env, webpack, userOptions = {}) {
  const options = { ...defaultOptions, ...userOptions };
  const webpackConfig = { ...baseConfig };

  const { client, server } = options;
  /* This is required to rename the entry points instead of using the defaults */
  if (env.target === "node" && server) {
    webpackConfig.entry = [server];
  }
  if (env.target !== "node" && client) {
    webpackConfig.entry.client = client;
  }

  return webpackConfig;
}


module.exports = {
  plugins: [
    {
      func: modifyEntryPoints,
      options: {
        server: path.join(__dirname, "./src/docker-server"),
        client: path.join(__dirname, "./src/docker-client"),
      },
    },
  ]
};

๊ฐœ๋ฐœ์ž์—์„œ ์ˆ˜์ •

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