webpack and remix logos
2022 年 11 月 22 日

从 Webpack 迁移到 Remix

Pedro Cattori
技术开发人员

今天,我们很高兴分享一种让基于 Webpack 的应用程序逐步迁移到 Remix 的方法。我们创建了一个基于 Webpack 的 Remix 编译器和开发服务器的示例,以便您可以在迁移的第一天就使用所有的 Webpack 加载器和插件。

Remix 的 Webpack 编译器演示

背景

不久前,我们编写了一份将您的 React Router 应用程序迁移到 Remix 的指南。虽然 JavaScript 部分很简单,但一些 Webpack 加载器和插件会改变 JavaScript 的语义,并且与 Remix 编译器不兼容,这使得增量迁移几乎不可能完成。其中最大的类别是各种 CSS 解决方案,它们改变了 JavaScript 模块导入的语义,这在 Remix 中不起作用。

我们希望从您的 React Router 应用程序到 Remix 的路径尽可能平滑,这个演示应该有助于进一步铺平道路。

关于 CSS 的附注,我们正在积极努力以在 Remix 编译器中直接支持更多流行的模式,但是我们正在努力解决细微差别和权衡,以确保我们不会破坏 Remix 默认的性能特性。(此外,您可能已经注意到 CSS 模块和 Vanilla Extract 的创建者 Mark Dalgleish 最近加入了我们的团队。)

基于 Webpack 的 Remix 编译器用于迁移

需要明确的是,基于 Webpack 的 Remix 编译器旨在实现向 Remix 的增量迁移,而不是长期的开发工作流程。

这个想法是,您可以立即使用基于 Webpack 的 Remix 编译器启动并运行,然后隔离地迁移每个路由。在执行此操作时,您可以删除该路由对非标准 Webpack 加载器的依赖。这样,当您将每个路由都迁移到 Remix 后,您可以切换到官方的 Remix 编译器,并获得其亚秒级构建的好处。

如果您没有积极地从 Webpack 迁移,那么我们不建议您使用基于 Webpack 的 Remix 编译器。不能保证基于 Webpack 的 Remix 编译器支持所有当前和/或未来的 Remix 功能。

演示存储库 + 迁移指南

要查看所有这些操作,请查看我们的Remix + Webpack 演示存储库。您可以在 README 中找到运行演示应用程序的说明,但更重要的是,您还可以找到我们的Webpack 应用程序的迁移指南

您的应用程序可能不依赖于任何不兼容的 Webpack 加载器,因此如果您不确定,请先使用标准迁移指南进行迁移。如果在用 Remix 替换您的捆绑器时遇到任何问题,那么您会知道值得查看 Webpack 迁移指南。


获取有关最新 Remix 新闻的更新

率先了解新的 Remix 功能、社区活动和教程。