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 的新功能、社区活动和教程的人。