글 작성 시 사용한 Storybook 버전 → 6.4.22
TL;DR
•
스토리북은 기본적으로 tsconfig에 적용한 paths를 이해하지 못합니다. → 컴포넌트에 해당 방법으로 import 시 에러 뿜뿜
•
.storybook/main.js에 코드를 추가해주면 tsconfig에 paths로 등록한 경로들을 Storybook이 이해할 수 있습니다! → 스토리북 좀만... 좀만 더.. 좀만 더 우리를 편하게해주지...않겠니?
⚽️ 목표
Storybook 스토리가 컴포넌트의 절대경로를 이해할수 있도록 만들어주자!
1. webpack 플러그인 설치
•
(스토리북의)웹팩이 프로젝트의 tsconfig에 설정된 pahts를 이해할 수 있도록 해주는 tsconfig-paths-webpack-plugin을 devDependencies에 추가합니다.
npm i -D tsconfig-paths-webpack-plugin
Bash
복사
2. main.js에 코드 추가
•
main.js에 아래 코드를 추가합니다.
// 생략
// 추가한 라인
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
module.exports = {
// 생략
webpackFinal: async (config) => {
// 생략
// 추가한 코드
config.resolve.plugins = [
new TsconfigPathsPlugin({
// tsconfig의 상대 위치를 입력.
configFile: path.resolve(__dirname, "../tsconfig.json"),
}),
];
return config;
},
};
JavaScript
복사
적용 확인
•
에러를 뿜어내지 않고 제대로 적용되어 컴포넌트에 존재하는 tsconfig path를 제대로 파싱해옵니다!
tsconfig paths 제대로 파싱