스토리북 webpack에서 vite로 마이그레이션하기

스토리북은 기본적으로 webpack을 빌더로 사용합니다. webpack에서 vite로 바꿔봅시다.

vite 빌더 받기

vite 빌더를 받아야합니다.

npx sb@next init --builder storybook-builder-vite

잘 되었다면 .storybook/main.js 에 아래 코드가 추가되었을 것입니다.

core: {
   builder: "storybook-builder-vite"
} 

잘 안된다면 -f 옵션으로 강제로 받아줍시다

npx sb@next init --builder storybook-builder-vite -f

alias 설정하기

다음으로 vite가 @를 alias로 사용하도록 설정해줍시다. 저의 경우 vue 프로젝트에서 /src 를 @로 alias 해서 사용하므로 storybook에서도 같은 alias를 쓸 수 있게 이 설정을 추가합니다. 필요 없으면 패스

viteFinal은 vite builder에 거는 훅입니다. 이 함수를 통해 vite에 대한 설정을 걸어줄 수 있습니다. config를 파라미터로 받는데, 이 config 객체에 필요한 설정을 추가해 return 해주면 됩니다.

.storybook/main.js 에 아래처럼 추가합니다.

const path = require('path');

//...

viteFinal: async (config, { configType }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, "../src"),
    };

    return config;
}

코드를 보면 대충 알겠지만 alias에 @에 대한 내용을 추가하는 것 뿐입니다. path 모듈 import 하는거 잊지 마시구요.

마치며

이로서 storybook을 vite builder로 동작하게 바꾸고, @가 alias로 동작하게 수정했습니다.

아래는 마이그레이션을 마친 뒤 .storybook/main.js 전체 코드입니다.

const path = require('path');

module.exports = {
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  core: {
    builder: "storybook-builder-vite"
  },
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-viewport"
  ],
  framework: "@storybook/vue3",
  viteFinal: async (config, { configType }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, "../src"),
    };

    return config;
  }
}