React Storybook을 v5.3에서 v6으로 마이그레이션한 방법

이 기사에 도달했다면 이미 Storybook에 익숙하고 새롭고 멋진 내용으로 이동하고 싶기 때문입니다. :).
내 간단한 이전 구성을 제공하고 v5.3에서 v6으로 업데이트하는 모험을 알려 드리겠습니다.

참고: v5.3으로 업데이트할 때 Storybook 구성을 변경하지 않았기 때문에 v5에서도 작동해야 한다고 생각합니다.

글쎄, v5.3에 대한 내 구성은 다음과 같습니다.

// .storybook/config.js

import {addParameters} from '@storybook/react';
import '../src/styles/App.scss'; // all my app styles because I don't import them in each component
import './styles.scss'; // with some overrided styles for Storyb
import theme from './theme';

addParameters({
  options: {theme}
});

// .storybook/main.js

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
};

// .storybook/theme.js

import {create} from '@storybook/theming';
import gigedsLogo from '../src/statics/logo.png';

export default create({
  base: 'light',
  brandTitle: 'Gigeds',
  brandImage: gigedsLogo,
  colorSecondary: '#de2020'
});

// .storybook/webpack.config.js

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
      },
      {
        test: /\.(jpg|jpeg|png|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              limit: 1000000,
              name: `statics/images/[name].[ext]`,
            },
          },
        ],
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'file-loader',
        options: {
          limit: 10000,
          name: `statics/fonts/[name].[ext]`,
        },
      },
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.css', '.scss'],
    modules: [resolve('../node_modules')],
    alias: {
      components: resolve('../src/components'),
      views: resolve('../src/views'),
      statics: resolve('../src/statics'),
    },
  },
};

보시다시피 구성은 플러그인 없이 테마 및 사용자 정의 Webpack 구성에 약간의 변경이 있는 매우 간단합니다.
스토리북이 제대로 작동하고 v5.3에서 v6으로 업데이트했다고 상상해 보세요. 그런 다음 스크립트yarn sb(귀하의 경우에는 yarn storybook가 될 수 있음)를 실행하여 모든 것이 예상대로 작동하는지 확인합니다... 컴파일 중... 그리고 BAM!

ERR! Error: You have both a "main" and a "config". Please remove the "config" file from your configDir

흠... 내 구성을 제거하면 내 스타일과 사용자 정의 테마를 어딘가에 로드해야 합니다 😕. 글쎄, 우리 config.js를 제거하고 문서로 이동하여 수정 방법을 살펴보겠습니다.
theme configuration documentation 으로 가자. 빙고! 몇 가지 새 패키지 설치yarn add --dev @storybook/addons @storybook/theming그런 다음 ./manager.js를 만들어 사용자 정의 테마를 로드하세요 💪

// ./manager.js
@see https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';

addons.setConfig({
  theme: themes.dark,
});

참고: 처음에는 내./config.js에 있는 모든 항목을 복사하여 붙여넣은 다음yarn sb 실행했는데 오류가 발생했습니다.

ERROR in ./src/styles/App.scss 2:0
Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

v6에서 더 이상 필요하지 않은App.scss 파일을 가져오기 때문이었습니다.

자, 그럼 또 달려가서yarn sb...😏 뱁! 블러디 터미널😨

A lot of errors, one per `.jsx` file which has `.scss` import.

내 생각은 어딘가에 webpack 구성을 추가하는 것이 었습니다. 꽤 분명했던 문서custom webpack configuration에서 잠시 다이빙을 한 후 모든 스토리를 로드할 위치에 의문이 생겼고 문서에는 스토리 로딩 + 웹팩 구성에 대한 언급이 전혀 없습니다. 시각. 그들은 항상 별도로 취급됩니다. 그래서 그냥 같은 모듈에 추가했습니다.

// ./main.js

const custom = require('./webpack.config.js');

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
  webpackFinal: (config) => {
    return {
      ...config,
      module: {
        ...config.module,
        rules: custom.module.rules,
      },
      resolve: {
        ...config.resolve,
        ...custom.resolve,
      }
    };
  },
};

그런 다음 실행yarn sb하고... 붐? (BAM! = 나쁨, BOOM! = 멋짐) 브라우저가 열렸습니다. 스토리북 로드 중... 로드 중... 로드 중... 😕 아직 뭔가 부족합니다... 터미널을 확인합시다. 오! 많은 경고(구성 요소당 하나):

...
WARNING in ./src/components/alert/Alert.stories.js 10:4
Module parse failed: Unexpected token (10:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
...

웹팩 구성에 babel-loader가 누락된 것 같습니다. 제 경우에는 Storybook v5.3이 필요하지 않았으므로 추가해 보겠습니다.

// .storybook/webpack.config.js

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  module: {
    rules: [
      ...
      {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         use: [
           'babel-loader',
             {
               loader: 'eslint-loader',
               options: {
                 cache: true,
                 emitWarning: true,
               },
             },
         ],
      },
...

이제 다시 run sb , 컴파일 중... 브라우저가 열렸습니다... 스토리북 로드 중... 로드 중... BOOM!💓 성공했습니다! 모든 구성 요소가 포함된 스토리북 🎉 쉬울까요? 😉

요약

나와 같은 구성이 있는 경우 다음을 수행합니다.

config.js 제거

manager.js를 생성하여 테마를 로드합니다.

main.js 로드 스토리 및 웹팩 구성

webpack 구성에 babel-loader를 추가하십시오.

추가 정보: Migration documentation 및 Storybook configuration

읽어주셔서 감사합니다. 댓글을 환영합니다.

Antonios Ntoumas의 Pixabay 이미지