バレルファイル 使っていいときわるいとき

https://meguroes.connpass.com/event/342717/

Transcript

1. バレルファイル 使っていいときわるいとき @berlysia / meguro.es #29
2. 結論 絶対一緒に使うやつはバレルファイルで公開していい ちょっとしか使わないならバレルは避けろ（裏技はある） 循環参照はLintとかで潰しておけ
3. バレルファイル / Barrel files 他のファイルのexportを まとめて再exportする ファイルのこと。
4. よく見るパターン utilityを束ねてるやつ componentを まとめてるやつ・隠蔽してるやつ
5. 最近いろいろ言われがち • Barrel files and why you should STOP using them now - DEV Community • Speeding up the JavaScript ecosystem - The barrel file debacle ◦ 中身はほとんど「バレルファイルをやめろ」 • A practical guide against barrel files for library authors - DEV Community • Please Stop Using Barrel Files | TkDodo's blog ◦ ライブラリのエントリファイルならいいんじゃないといってる • eslint-plugin-no-barrel-filesを導入してBarrel filesをやめた話 | PR TIMES 開発 者ブログ
6. 何がそんなにダメなのか • 循環参照を起こしやすい • 必要ないファイルを読み込んでしまう
7. 循環参照ってどういうことよ
8. 必要ないファイルを読み込んでしまう ざっくりふたつにわかれる • バンドルしない場合 ◦ ブラウザ、Node.js、Deno、Bun、…… ◦ Viteの開発モードみたいなやつ ▪ • バンドルする場合 ◦ webpack、Rollup、esbuild、Rolldown、……
9. バンドルしない場合 barは読み込まれますか？
10. バンドルしない場合 barは読み込まれますか？
11. だから これがやばい
12. ディープインポートが好まれる
13. Deferring Module Evaluation / Stage 2.7 中身触るまで評価されない提案
14. バンドルする場合 ✨Tree Shaking✨ だけで終わるならこんなに嫌われてない
15. どうなる？ どうなってほしい？ barに副作用
16. どうなる？ どうなってほしい？ barrelに副作用
17. Tree Shakingでよく書くやつ • package.json の sideEffects: false ◦ 「副作用がないからTree shakingしていいよ！」とバンドラは解釈する ◦ ライブラリでよく使うやつ ▪ 副作用があるライブラリでこれをやると信用して副作用ごと消える
18. Next.jsが頑張っている
19. （記事を読む限り）こう
20. たどりつきたい結論 絶対一緒に使うやつはバレルファイルで公開していい ちょっとしか使わないならバレルは避けろ（裏技はある） 循環参照はLintとかで潰しておけ
21. 一緒に使うならバレルでいい！
22. ちょっとしか使わないならやめとけ！
23. バンドラー向けの裏技 package.jsonをおく
24. 結論 絶対一緒に使うやつはバレルファイルで公開していい ちょっとしか使わないならバレルは避けろ（裏技はある） 循環参照はLintとかで潰しておけ むやみやたらにやめなくていい
25. おまけ）ESMのときにフォルダを参照するやつ
26. で、誰 • berlysia ◦ Web engineer (mainly frontend) ◦ 妄想を現実にすることをしている • 株式会社ドワンゴ 教育事業 ◦ Webフロントをやる人 ◦ Webフロントのためにいろいろやる人 • TSKaigiの中の人 ◦ TypeScriptのカンファレンス TSKaigi 2025 ◦ 5月に開催するのでよろしくね ▪ CfP募集中！ まってま〜す ▪ 締切は明日まで！