Storybook3 + React, tsx Configuration

현재 Storybook 최신 버전에서는 Webpack3을 사용하고 있다. 본 프로젝트에서 TypeScript를 Webpack4와 사용 중이었다면, 스토리북의 Webpack3와 ts-loader가 충돌한다. ts-loader의 최신버전이 Webpack3과 완벽하게 호환되지 않기 때문이다. Webpack3과 호환되는 ts-loader는 3.5.0이 있다. ts-loader의 버전을 내리면 본 프로젝트에서 터지게 되는 딜레마에 빠진다.

다행히도, Webpack에서 TypeScript Loader는 두 가지가 공존하고 있다! 1) 본 프로젝트에서 Webpack4 + ts-loader를 사용중이었다면 awesome-typescript-loader 4.0.1을 설치하여 storybook의 webpack config에서 atl을 사용하면 되고, 2) 반대로 본 프로젝트에서 Webpack4 + awesome-typescript-loader를 사용중이었다면 ts-loader 3.5.0을 설치하여 storybook의 webpack config에서 tl을 사용하면 된다.

물론 현재 alpha stage에 있는 Storybook4를 사용해도 되겠지만, 되도록 프로젝트 설정단계에서는 최대한 안정화된 것만 쓰고 싶은 개인의 욕심(?)이다. 당장 지금 Webpack3, Webpack4끼리도 loader가 안 맞아서 이 사단이 났는데, 이것 때문에 alpha를 가져다 쓴다면 왠지 Storybook3만을 지원하던 addon들이 다 터질 것 같은 느낌이 들었다. 물론, 그걸 테스트하고 싶은 생각은 더더욱 없고! ^0^b

Leave a Reply