PCWEB-8414 번들러 Webpack, Rollup 제거와 vite마이그레이션 #90
Conversation
| config.plugins.push( | ||
| /** @see https://github.com/aleclarson/vite-tsconfig-paths */ | ||
| tsconfigPaths({ | ||
| projects: [path.resolve(path.dirname(__dirname), 'tsconfig.json')], |
There was a problem hiding this comment.
타입스크립트 경로 매핑을 위해 vite-tsconfig-paths를 사용하여 tsconfig.json에 설정되어있는 세팅을 가져다 사용하고 있습니다.
storybook은 자동으로 root경로에 있는 컴파일러 설정을 가져올 수 없고 위와같이 설정을 덮어 씌워줘야 정상적으로 작동합니다
| @@ -40,6 +40,8 @@ export const parameters = { | |||
|
|
|||
| /** | |||
| * global decorators | |||
| * @see https://vitejs.dev/guide/features.html#jsx | |||
| * vite 설정으로 인해 JSX syntax를 사용하려면 .jsx 확장자를 사용해야한다. | |||
| "tsc": "tsc", | ||
| "storybook": "start-storybook -p 6006", | ||
| "storybook-nocache": "start-storybook --no-manager-cache -p 6006", |
There was a problem hiding this comment.
node_modules 삭제 후에 node_modules/.cache/storybook안의 캐쉬가 꼬이거나 사라져 yarn storybook이 정상 동작 하지 않을 경우가 있는데
이 경우 최초 1회 storybook-nocahe로 실행시켜 주면 storybook의 캐싱 매커니즘을 비활성화하여 동작 할 수 있게합니다.
다만 스토리북 로딩 시간에 심각한 영향을 줄 수 있으므로 일반적으로는 사용하지 않는 게 좋습니다
| "react": "^17.0.0", | ||
| "react-dom": "^17.0.0", |
There was a problem hiding this comment.
vitejs/vite#6215
빌드 할 때 아래와 같은 에러가 있었는데 react 17버전으로 올려주니 해결됨,.,
Uncaught ReferenceError: module is not defined at jsx-runtime.js:6
| "@storybook/addon-essentials": "^6.5.10", | ||
| "@storybook/addon-interactions": "^6.5.10", | ||
| "@storybook/addon-links": "^6.5.10", | ||
| "@storybook/addons": "^6.5.10", | ||
| "@storybook/builder-webpack4": "^6.5.10", | ||
| "@storybook/manager-webpack4": "^6.5.10", | ||
| "@storybook/builder-vite": "^0.2.2", |
There was a problem hiding this comment.
webpack -> vite로 넘어갈 경우 관련 패키지를 모두 삭제해야함.
반대의 경우도 마찬가지
| "@storybook/react": "^6.5.10", | ||
| "@storybook/testing-library": "^0.0.13", |
There was a problem hiding this comment.
사용하지 않는 testing-library (jest기반)
이를 사용하고자 하면 .storybook/preview-head.html 내부에 아래의 코드를 추가해야한다.
<script>
window.global = window;
</script>jest는 node 런타임에서 동작하기 때므로 global 객체를 사용하는데 브라우저는 global을 참조하고 있지 않기 때문에 추가하지 않으면 레퍼런스 오류가 난다. Uncaught ReferenceError: global is not defined
package.json
Outdated
| "babel-loader": "^8.2.5", | ||
| "babel-preset-react-app": "^9.1.2", | ||
| "eslint-config-prettier": "^6.10.0", | ||
| "prettier": "2.0.2", | ||
| "react": "16.13.1", | ||
| "react-dom": "16.13.1", | ||
| "rollup": "^2.7.2", | ||
| "rollup-plugin-babel": "^4.4.0", | ||
| "rollup-plugin-peer-deps-external": "^2.2.2", | ||
| "rollup-plugin-postcss": "^3.1.1", | ||
| "rollup-plugin-terser": "^5.3.0", | ||
| "rollup-plugin-typescript2": "^0.31.2", | ||
| "sass": "^1.53.0", |
There was a problem hiding this comment.
babel, rollup, sass등 사용하지 않는 라이브러리 삭제
작업 내용 (Content) 📝
스크린샷 (Screenshot) 📷
링크 (Links) 🔗
기타 사항 (Etc) 🔖
테스트 Checklist (Test Checklist) ✅
희망 리뷰 완료 일 (Expected due date) ⏰
202X.X.X. Wed