Use Parcel as bundler instead of Rollup

[Dogdriip]

Self Checklist

• I wrote a PR title in English.
• I added an appropriate label to the PR.
• I wrote a commit message in English.
• I wrote a commit message according to the Conventional Commits specification.
• I added the appropriate changeset for the changes.
• [Component] I wrote a unit test about the implementation.
• [Component] I wrote a storybook document about the implementation.
• [Component] I tested the implementation in various browsers.
  • Windows: Chrome, Edge, (Optional) Firefox
  • macOS: Chrome, Edge, Safari, (Optional) Firefox
• [New Component] I added my username to the correct directory in the CODEOWNERS file.

Related Issue

• Add build job to CI and improve build time #1005

Summary

@channel.io/bezier-react 라이브러리 번들러를 Rollup에서 Parcel로 변경합니다.

Details

📦 Introduce Parcel

• Zero-config를 지향하는(= 거의 모든 것을 기본으로 지원하는) 번들러입니다.
• bezier-react 번들링에서 필요로 하는 모든 것을 지원합니다.
  • ✅ TypeScript 트랜스파일: 지원합니다.
  • ✅ CommonJS, ESM output: 지원합니다.
  • ✅ 타입(.d.ts) 생성: 지원합니다.
    • tsc와 Babel 대신 Parcel 내부 구현을 사용합니다. 앞의 둘보다 더 빠르다고 합니다. #
  • ✅ Tree shaking: 지원합니다.
    • 어차피 트리셰이킹은 코드 정적 분석으로 이루어지기 때문에 Rollup과 비슷한 퍼포먼스를 낼 것으로 예상합니다. #
      • 트리셰이킹은 Parcel이 오히려 더 나은 성능을 보여주는 것으로 알고 있습니다. 대표적인 예로, 호출되지 않는 dynamic import(import().then 등) 문법을 Rollup에서는 잡지 못하지만(Tree shaking in dynamic modules rollup/rollup#3447 ), Parcel은 잡을 수 있습니다.
• 이외 대부분의 레퍼런스는 Parcel 공식 문서에서 찾아볼 수 있습니다.
  • Parcel 한국어 문서도 있으나, outdated된 것으로 보입니다. Parcel의 핵심 아이디어나 기본적인 설명은 여기를 참고해도 될 것 같습니다.

⚠️ Caveats

Parcel을 사용하게 되면 어쩔 수 없이 버리거나 바꿔야 하는 것들이 있습니다. 아직까지 찾아본 바로는 다음과 같습니다.

• 일부 export 문법을 인식하지 못합니다.
  • 대표적으로 export * as A from B(B의 모든 named export를 A로 export)가 있습니다.
  • @parcel/transformer-typescript-types의 문제로, 이 PR에서는 위에 해당하는 문법들을 다음과 같이 바꿔서 해결했습니다.

    import * as A from './B'
    export { A }

• Parcel은 아직 tsconfig의 baseUrl과 path property를 지원하지 않습니다.

  Parcel does not currently support the baseUrl or paths options in tsconfig.json, which are TypeScript specific resolution extensions. Instead, you may be able to use Parcel's tilde or absolute specifiers to accomplish a similar goal. See Configuring other tools in the dependency resolution docs for information about how to configure TypeScript to support these. #

  • 현재 tsconfig에서 path를 통해 "Components/*": ["src/components/*"], "Constants/*": ["src/constants/*"], ...와 같이 정의하고 있는데, 이렇게 정의한 alias들을 사용하지 못하게 됩니다.
  • 대신 Parcel에서는 out-of-the-box로 Tilde specifier를 지원합니다. import 시 아래와 같이 사용합니다.
    • As-is: import { Text } from 'Components/Text'
    • To-be: import { Text } from '~/src/components/Text'

🤔 Todo

앞으로 해야 하거나 하고 싶은 것들입니다.

• 사용처에서 문제가 없는지 확인
  • 모든 컴포넌트 및 함수, assets 등이 제대로 export되는지 + 사용처에서 문제가 없는지 확인해야 합니다.
• Tree shaking이 잘 되는지 Bundle analyzer 등으로 확인
• ESLint, jest 등 다른 라이브러리와 충돌이 없는지 설정 확인
  • jest 참고: https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring
• Rollup, Babel 등 더 이상 필요하지 않은 패키지 제거
• CI에서 빌드가 원활한지 체크
  • 캐시를 활용할 수 있다면 활용
• (빌드 타임이 줄었다면) 개선사항 측정

---

• @parcel/reporter-bundle-analyzer 사용: 번들 visualize가 가능합니다.
  • 
• typecheck 스크립트에 @parcel/validator-typescript 사용: Parcel은 내부에서 사용하는 타입 체커를 외부에서 사용할 수 있도록 제공하고 있습니다. 그리고 이는 상기했듯 tsc보다 더 빠릅니다. typecheck 스크립트에 이를 사용해서 commit hook 수행에 걸리는 시간도 줄일 수 있을 것 같습니다.

Breaking change or not (Yes/No)

Yes.

References

• https://parceljs.org/
• https://bundlers.tooling.report/

---

• @parcel/transformer-typescript-types doesn't recognize type declarations for React SVG parcel-bundler/parcel#8150

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5458b0a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Dogdriip]

본문에 이어 개인적인 의견은 코멘트로 달아두겠습니다.

• Tilde 방식의 import로 바꾸는 것이 오히려 더 좋다고 생각합니다. 단적으로, src/components 외에 src/images와 같이 새로운 디렉토리가 생기더라도 유연하게 대응할 수 있으며, path alias에 기댄다면(현재) 디렉토리를 생성하거나 이름을 변경할 때마다 tsconfig를 수정해야 합니다.

[github-actions]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[Dogdriip]

Update 2023/01/06

• 일부 컴포넌트가 제대로 번들링되지 않는 문제가 있습니다. 확인 중에 있습니다.
  • 현재까지 추정하기로는 컴포넌트 코드 자체는 번들에 잘 포함되나, named export 컴포넌트만 잘 export되고 default export 컴포넌트는 export가 안 되는 것 같습니다.
    • 예시 (Icon은 named export, ListItem은 default export임. https://evanw.github.io/source-map-visualization/ )
      • 
      • 
      • 
• import * from ~ 문법이나 export * from ~ 문법으로 import/export한 모듈에 대해 sourcemap이 제대로 만들어지지 않는 이슈가 있습니다. 확인 중에 있습니다.
  • 현재는 src/index.ts에서 모든 모듈을 export * 하고 있기에 소스맵이 아예 생성되지 않는 상황입니다. 😓
    • 
  • 관련 이슈: Bundle is missing exports parcel-bundler/parcel#7622 (comment)

[Dogdriip]

Update 2023/01/17

• 번들링 및 소스맵 생성은 잘 되는데 reporter가 문제였던 것 같습니다... bundle-buddy로 확인해보면 다음과 같이 잘 뜨네요.
  • 
• 빌드 결과물만 빼서 사용처에 꽂아봤을 때 여전히 import되지 않는 컴포넌트들이 몇 개 있어서 확인해보고 있습니다.

[sungik-choi]

#1424 에서 rollup v3를 사용하여 개선되었습니다