모노레포 도입기

오늘은 React, Storybook, Emotion, Webpack5, Babel을 가지고 컴포넌트를 위한 워크스페이스 환경을 구축해보겠습니다.

CRA없이 React 개발을 위한 환경 만들기

1. 먼저 /packages 폴더 하위에 /common-components라는 이름의 폴더를 만들고, 본격적으로 프로젝트를 시작하기 위해 yarn init작업을 해주겠습니다.

mkdir common-components
cd common-components
yarn init

2. Entry Point가 될 index.ts파일을 만들어주세요.

touch index.ts

3. react와 react-dom을 설치해주세요.

yarn add react react-dom

4. 웹팩을 설치해주세요.

webpack이 메인이고, webpack-cli는 웹팩 커맨드를 실행하기 위해, webpac-dev-server는 react를 local 환경에서 실행하기 위해 필요합니다.

yarn add -D webpack webpack-cli webpack-dev-server 

5. babel을 설치해주세요.

yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/preset-typescript

6. 현재 워크스페이스의 루트 경로에 webpack 설정 파일과 babel 설정 파일을 만들어주세요.

# common-components/
touch webpack.config.js
touch babel.config.json

7. webpack, babel 설정을 해주세요.

아래는 저의 설정 파일 내용입니다. 참고만 해주세요.

// webpack.config.js
const path = require('path')

module.exports = {
  mode: 'production',
  entry: {
    index: { import: './src/index.ts' }
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
    ]
  },
  output: {
    filename: 'components.bundle.min.js',
    library: 'playgroundComponents',
    libraryTarget: 'umd',
    clean: true
  }
}

// babel.config.json
{
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-react-jsx",
    [
      "emotion",
      {
        "autoLabel": true,
        "labelFormat": "[dirname]-[filename]--[local]"
      }
    ]
  ],
  "presets": [
    ["@babel/env", { "shippedProposals": true }],
    [
      "@babel/react",
      { "runtime": "automatic", "importSource": "@emotion/react" }
    ],
    ["@babel/typescript", { "onlyRemoveTypeImports": true }]
  ]
}

CRA 없이 React 개발 환경 구축을 완료했습니다. config 파일은 공식문서에서 옵션을 살펴보고 본인에게 맞게 수정하기를 권합니다.

Storybook

storybook이 버전 6.2부터 Webpack5를 지원하게 되었습니다. 메뉴얼에 따라 storybook을 설치해보겠습니다.

1. storybook install

yarn dlx sb init --builder webpack5

2. storybook 실행해보기

yarn storybook

여기까지 순조롭게 진행된다면 좋겠지만, 아마 높은 확률로 storybook 실행이 되지 않을 것입니다. 하나씩 해결해봅시다.

3. Webpack5 사용을 위해 resolution 추가하기

먼저 hoisting 이슈 해결을 위해 최상위 워크스페이스 루트 경로의 package.json 에 아래와 같이 resolution을 추가해주세요.

  "resolutions": {
    "@storybook/core-common/webpack": "^5",
    "@storybook/core-server/webpack": "^5",
    "@storybook/react/webpack": "^5"
  },

4. 트러블슈팅

저는 resolution을 추가해주었음에도 yarn storybook이 동작하지 않았는데요, 이 이슈를 해결하느라 시간을 꽤 많이 썼습니다. 크게 두 가지 이슈가 주로 발생했습니다.
1) Modules not found... 오류가 뜨는 경우
분명 package.json 파일에 명시가 되어있고, yarn install 작업을 해주었음에도 Modules not found 오류가 발생하는 경우가 있습니다. 이때에는 최상위 루트 경로에서 해당 패키지를 yarn add한다면 해결됩니다.

2) Module not found: Error: Can't resolve 'util' in webpack 오류가 뜨는 경우
webpack5의 하위 버전에서 node.js를 위한 폴리필을 기본으로 탑재하고 있었지만, webpack5로 버전업되면서 폴리필의 포함이 선택사항이 되었습니다.
이 오류를 해결할 때 두 가지 옵션이 존재합니다. 필요에 따라 선택해서 해결하세요.

• 폴리필이 필요한 경우

yarn add -D util

// webpack.config.js 파일에 아래 내용 추가
module.exports = {
  // ...
  resolve: {
      fallback: {
        util: require.resolve("util/")
      }
  }
  // ...
};

• 폴리필이 필요하지 않은 경우

// webpack.config.js 파일에 아래 내용 추가
module.exports = {
  // ...
  resolve: {
      fallback: {
        util: false
      }
  }
  // ...
};

마무리

프로젝트 환경 설정은 당장 코드를 짜고 싶은 입장에서 참 귀찮기도 하지만...

프로젝트를 제대로 진행하기 위한 초석이자 반드시 넘어야할 벽이라고 생각합니다. 내 프로젝트인데 나의 필요에 따라 커스텀하는 게 당연하기도 하고요.

과정을 잊지 않고자 글로 남겼는데 프로젝트를 저와 비슷하게 구성하실 분들께도 도움이 되면 좋겠습니다. 감사합니다.

출처

https://medium.com/age-of-awareness/setup-react-with-webpack-and-babel-5114a14a47e9
https://storybook.js.org/blog/storybook-for-webpack-5/
https://github.com/angular/angular-cli/issues/20819
https://techblog.woowahan.com/7976/