【プログラミング】webpackが開発終了と聞いたので後釜探し

Node.jsがDenoに変わったりと最近、web界隈を支えてきたコア技術の入れ替わりが多い気がしますね。
一部界隈で、OSSの時代は終わったみたいな声がささやかれてますがその影響だったりするんだろうか。
もともと、OSSって自身のスキルを示すために開発している節があったので、そうした取り組みが破綻し始めてると考えると、web界隈の人気もしばらく低迷しそう。

webpackが開発終了

webpackが2023年初頭に開発終了しました。
理由は、「10年も前のニーズに合わせて作ったツールだからメンテナンスができないよ」とのこと。 詳しくは下のブログ記事を御覧ください。
英語ですが。
合わせて、後継のturbo packへの熱い想いも書かれているので見ると面白いです。

vercel.com

Internet Explorerへの対応する役割を完遂

半ば強引な形もありましたが、Internet Explorerへ対応しながら、モダンなwebに対応したwebアプリを開発する役割に一役買っていましたもんね。
その役割をInternet Explorerのライフサイクルが尽きるまで全うしたと考えると、めちゃくちゃすごい。
web業界に与えた影響は計り知れないと思います。
何だかんだ10年以上使われていますもんね。

webpackの開発者はturbopackへ

webpack の開発者はどうやらturbopack への開発に鞍替えしたようです。
turbopackはwebpackの後継にあたるようで、ソフトウェア寿命が尽きてしまったwebpackではできない主に性能面の課題を克服するために開発しているとのこと。
たしかに、webpackはソフトウェアが肥大化すると途端にバンドル速度が落ちてしまう。
とあるプロジェクトでは、一行コードを書き換えるだけで、トランスパイルするのに5秒くらいかかって、生産性がめちゃくちゃ落ちてた。
まあ、webpackはInternet Explorerにも対応するなど、かなり汎用性が高いものでしたから仕方無い気がしますが。
そんなwebpackの弱点を改善したいというのは個人的に期待のできる取り組み！

turbo.build

公式githubはまだまだ稼働していそう

自分は後釜を探しつつありますが、webpackの公式githubは現在もコミットが続いているのでしばらくはサポートがつづくんじゃないかと思ってます。
記事公開の時点で、7月13日に最新リリースが公開されていますからね。
開発終了と言いつつ、あまりにも広く使われているのでサポートを突然終了することはできないんでしょうね。
というか、終了したら色んなサイトの更新が止まりそう。

github.com

turbopack vs viteの争いへ

「webpack　開発終了」とかで検索すると、 turbopack とviteが検索にヒットします。 なので、基本的にはこの2つを比較検討しておけば問題ないかと思います。 OSSの流行は回転が早いので、あくまで2023年時点の話ですが、仕事に使うにしろ趣味で勉強するにしろ個人的にはviteの方が無難かなと。

速度重視ならturbopack

速度重視ならturbopackらしいです。
実際に試したわけでは無いので、公式サイトの受け売りです。
というか、速度を前面に押し出していて、 速度比較のページを設けてます。
更新速度は、圧倒的にturbopackですね。
10倍くらい差が出てます。

https://turbo.build/pack/docs/comparisons/viteturbo.build

とりあえず使いやすさの観点でviteが無難

viteの方が長年使われていたということもあって、現状はviteのほうが無難かな～。 使用している例も使いやすいし、トラブルが起きたときや設定をカスタマイズしたいときにも情報を収集しやすい。

turbopackはMPLライセンスであることに注意

turbopackの最大の難点はMPLライセンスなんですよね。
MPLライセンスは、複雑なんですけど、注意点が頒布するときにそのソフトウェアもMPLでライセンスしなければならないことなんですよね～。
turbopackは、バンドルツールなので、それを使って作成したwebアプリなどを公開するのはいいんでしょうけどね～。
turbopackを含んだ開発環境とかを公開するとなると、ソースコードを頒布可能にするなど少々手間がいります。
しかも、MPLライセンスを含んだソフトウェアはMPLでライセンスしなければならないという煩わしさ。
このあたりに配慮が必要な時点で少々煩わしいですね～。
比べて、viteは考えることも無いのでラクです。
というか、仕事として作成したソフトウェアをOSSとして公開しなければならないというリスクを管理しなければならないという時点で採用されることは少ないかと。

vite でreactの環境を作る方法

とりあえず、viteを自分の中では使って行こうと決めたのでreactプロジェクトの作り方を早速学んでみました。 といっても、めちゃくちゃ簡単でした。

npm create vite

上の処理が済んだあとは、

npm install

これだけでした。

reduxの場合

我らがredux-toolkitを使いたい場合は下記のコマンドです。 開発が進んだあとから、reduxを導入するのは骨が折れるので導入するなら早めがおすすめです。

npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

以上です。

redux の方がコマンド一発で構築できて至れりつくせり感があって好き。