rollup + storybook 따라하기

세브·2022년 4월 26일
0
post-thumbnail

왜 rollup인가?

스토리북의 기본 설정은 기존의 프로젝트에 같이 합쳐서 쓰는 것이다.
하지만 실제로 이렇게 써볼 경우 기본적으로 스토리북은 해당 프로젝트의 UI 컴포넌트에 종속적이 된다. 따라서 n개의 프로젝트에서 UI 컴포넌트를 쓰고, 해당 UI 컴포넌트를 독립적으로 단위 테스트하고 디자인 공유 및 수정이 이뤄져야 할 때는 전혀 다른 접근방법이 필요하고, 이 경우에 rollup이 대안이 될 수 있다.

문서 대상자

기본적으로 3~5년차의 이미 기본적인 웹 프론트엔드 개발방식에 익숙한 개발자를 상정하였다.

프로젝트 설치

1. 프로젝트 사전설정

mkdir web-design-system-poc
cd web-design-system-poc
yarn init -y
npx add-gitignore storybookjs,react,yarn
yarn add react react-dom
yarn add -D @types/react @types/react-dom typescript -D rollup @rollup/plugin-typescript @rollup/plugin-node-resolve rollup-plugin-peer-deps-external @rollup/plugin-image @storybook/react @babel/core babel-preset-react-app babel-loader
yarn add -P react react-dom
# 필요할 경우 yarn add -P antd
npx sb init

2. typescript 설정

touch tsconfig.json

이후 tsconfig.json에 아래의 내용을 복사, 붙여넣기 한다.

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "node",
    "baseUrl": "./",
    "typeRoots": ["./typings"],
    "resolveJsonModule": true,
    "declaration": true,
    "declarationDir": "./build",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

3. rollup 설정

touch rollup.config.js

이후 tsconfig.json에 아래의 내용을 복사, 붙여넣기 한다.

// rollup.config.js 파일

import resolve from "@rollup/plugin-node-resolve";
import image from "@rollup/plugin-image";
import typescript from "@rollup/plugin-typescript";
import peerDepsExternal from "rollup-plugin-peer-deps-external";

export default {
  input: "./index.ts",
  output: [
    {
      dir: "build",
      format: "esm",
      exports: "named",
      sourcemap: true,
    },
  ],
  preserveModules: true,
  plugins: [
    peerDepsExternal(),
    image(),
    resolve(),
    typescript({ useTsconfigDeclarationDir: true }),
  ],
};

4. package.json 설정

package.json에 아래의 내용을 복사, 붙여넣기 한다.

...
  "main": "./build/index.js",
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "build": "rollup -c"
  },
...

5. storybook 설정

.storybook/main.js에 아래의 내용을 복사, 붙여넣기 한다.

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/react",
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve("babel-loader"),
      options: {
        presets: [["react-app", { flow: false, typescript: true }]],
      },
    });
    config.resolve.extensions.push(".ts", ".tsx");

    return config;
  },
}

package.json의 스크립트를 수정해준다.

...
  "scripts": {
    ...
    "storybook": "start-storybook -p 6006 -s public",
    ...
  },
...

참고문서

profile
기본을 쌓으려 노력하는 리액트 개발자

0개의 댓글