webpack and remix logos
2022 年 11 月 22 日

從 Webpack 遷移到 Remix

Pedro Cattori
資深開發人員

今天,我們很高興分享一種讓基於 Webpack 的應用程式逐步遷移到 Remix 的方法。我們建立了一個基於 Webpack 的 Remix 編譯器和開發伺服器範例,讓您可以從遷移的第一天起就使用所有的 Webpack loader 和外掛程式。

Remix 的 Webpack 編譯器示範

背景

不久之前,我們撰寫了一篇將 React Router 應用程式遷移到 Remix 的指南。雖然 JavaScript 的部分很簡單,但一些 Webpack loader 和外掛程式改變了 JavaScript 的語義,並且與 Remix 編譯器不相容,這使得漸進式遷移幾乎不可能完成。其中最大類別是各種 CSS 解決方案,這些解決方案改變了 JavaScript 模組匯入的語義,而這些語義在 Remix 中無法運作。

我們希望從您的 React Router 應用程式到 Remix 的路徑盡可能順暢,這個示範應該有助於進一步鋪平道路。

關於 CSS 的附註,我們正在積極努力直接在 Remix 編譯器中支援更多流行的模式,但我們正在解決一些細微差別和權衡,以確保我們不會扼殺 Remix 預設的效能本質。(此外,您可能已經注意到 CSS 模組和 Vanilla Extract 的創建者 Mark Dalgleish 最近加入了我們的團隊。)

基於 Webpack 的 Remix 編譯器適用於遷移

明確來說,基於 Webpack 的 Remix 編譯器是為實現逐步遷移到 Remix 而設計的,而不是長期的開發工作流程。

這個想法是您可以使用基於 Webpack 的 Remix 編譯器立即啟動並執行,然後隔離遷移每個路由。當您這樣做時,您可以移除該路由對非標準 Webpack loader 的依賴。這樣,當您將每個路由遷移到 Remix 時,您可以切換到官方的 Remix 編譯器,並獲得其次秒建置的優勢。

如果您沒有積極地從 Webpack 遷移,那麼我們不建議您使用基於 Webpack 的 Remix 編譯器。不保證基於 Webpack 的 Remix 編譯器支援所有目前和/或未來的 Remix 功能。

示範儲存庫 + 遷移指南

若要查看所有這些實際運作情況,請查看我們的 Remix + Webpack 示範儲存庫。您可以在 README 中找到執行示範應用程式的說明,但更重要的是,您還可以找到我們的 Webpack 應用程式的遷移指南

您的應用程式可能不依賴任何不相容的 Webpack loader,因此如果您不確定,請先使用標準遷移指南進行遷移。如果您在將您的 bundler 替換為 Remix 時遇到任何問題,那麼您就會知道 Webpack 遷移指南值得查看。


取得有關最新 Remix 新聞的更新

成為第一個了解新的 Remix 功能、社群活動和教學課程的人。