[vue.js] typescript + storybook 설정하기

vue-property-decorator 클래스 기반 타입스크립트에 storybook을 설정하는 법

스토리북에서 *.stories.ts를 만들어서  vue파일을 import 하면 

*.vue 파일 내부에 '@' 데코레이터를 인식을 못해서 에러가 날 것이다.

이런 경우 스토리북 웹팩을 설정해주어야 한다.

webpack.config.js 생성

.storybook 폴더 밑에 webpack.config.js 파일을 만들어 주고, 웹팩 플러그인을 설치해준다.

yarn add -D fork-ts-checker-webpack-plugin  //타입스크팁트 체커

// 또는

npm i -D fork-ts-checker-webpack-plugin

babel-preset-vue가 없다면 반드시 설치해주어야 한다.

yarn add -D babel-preset-vue

설치가 완료되었으면 webpack.config.js 파일로가서 아래와 같이 셋팅을 해준다.

// webpack.config.js

const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = async ({ config, mode }) => {
  config.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.less', '.scss', '.sass', '.html');
  config.module.rules.push({
    test: /\.ts$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true // used with ForkTsCheckerWebpackPlugin
        },
      },
    ],
  });
  
  config.plugins.push(new ForkTsCheckerWebpackPlugin());

  return config;

스타일을 사용하는데, 실행시 스타일 관련해서 아래와 같이 에러가 날 경우

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

아래와 같이 스타일 부분을 웹팩에 추가를 해주어야한다.

config.module.rules.push({
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../'),
  });

나는 scss를 사용하기 때문에 반드시 위 3가지 로더를 설치한다.

(웹펙 공식문서 : https://webpack.js.org/loaders/sass-loader/#root 에서 확인가능하다)

전체코드는 아래와 같다.

const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');


module.exports = async ({ config, mode }) => {
  config.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.less', '.scss', '.sass', '.html');
  config.module.rules.push({
    test: /\.ts$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true // used with ForkTsCheckerWebpackPlugin
        },
      },
    ],
  });
  
  config.module.rules.push({
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../'),
  });
  
  
  config.plugins.push(new ForkTsCheckerWebpackPlugin());

  return config;
}  

스토리 북에도 잘 표시된다.

storybook docs