9 月 16 日,全栈 Web 框架 Remix 正式发布了 2.0 版本,Remix 团队在发布 1.0 版本后经过近 2 年的持续努力,发布了 19 个次要版本、100 多个补丁版本,并解决了数千个问题和拉取请求,终于迎来了第二个主要版本!
成都创新互联是一家专注于成都网站制作、网站建设与策划设计,江北网站建设哪家好?成都创新互联做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:江北等地区。江北做网站价格咨询:028-86922220
Remix 具有以下特性:
- 追求速度、用户体验(UX),支持任何 SSR/SSG 等
- 基于 Web 基础技术,如 HTML/CSS 与 HTTP 以及 Web Fecth API,在绝大部分情况可以不依赖于 JavaScript 运行,所以可以运行在任何环境下,如 Web Browser、Cloudflare Workers、Serverless 或者 Node.js 等
- 客户端与服务端一致的开发体验,客户端代码与服务端代码写在一个文件里,无缝进行数据交互,同时基于 TypeScript,类型定义可以跨客户端与服务端共用
- 内置文件即路由、动态路由、嵌套路由、资源路由等
- 去掉 Loading、骨架屏等任何加载状态,页面中所有资源都可以预加载(Prefetch),页面几乎可以立即加载
- 告别以往瀑布式(Waterfall)的数据获取方式,数据获取在服务端并行(Parallel)获取,生成完整 HTML 文档,类似 React 的并发特性
- 提供开发网页需要所有状态,开箱即用;提供所有需要使用的组件,包括
、
、
、
、
,用于处理元信息、脚本、CSS、路由和表单相关的内容
- 内置错误处理,针对非预期错误处理的
和开发者抛出错误处理的
Remix 是一个由 React Router 开发团队所开发的基于 React 和 TypeScript 的全栈框架。2021 年 11 月,Remix 正式开源,至今已在 Github 上获得了 24.6k star。Remix 正式开源时,引发了前端圈不小的关注,其被普遍认为是 Next.js 的强劲对手,那时隔两年,它和 Next.js 之间的“竞争”怎么样了呢?
目前,Next.js 拥有 112k star,是 Remix 的近 5 倍。Next.js 周下载量 279 万,而 Remix 仅有 1.4 万,Next.js 是 Remix 的近 200 倍。可见,Remix 并没有像大家预料的那样,成为 Next.js 的有力竞争对手,在开发者社区中只有较小的市场份额。尽管如此,Remix 仍然吸引了一些开发者,并且在特定领域或项目中有其优势和适用性。
下面就来看看 Remix 2.0 都有哪些更新!
create-remix
命令行工具体验。Remix v2已经升级了对React和Node的最低版本支持,并正式支持以下版本:
以下未来标志已被移除,并且它们的行为现在是默认的,现在可以从remix.config.js
文件中删除这些设置。
v2_dev
,新的开发服务器,具有HMR + HDR,如果在future.v2_dev
中有配置而不仅仅是布尔值(例如,future.v2_dev.port
),可以将它们提升到remix.config.js
中的根dev
对象中。v2_errorBoundary
,移除了CatchBoundary
,改为使用单个ErrorBoundary
v2_headers
,修改了嵌套路由场景中的头部逻辑v2_meta
,修改了meta()
的返回格式v2_normalizeFormMethod
,将formMethod
规范化为大写v2_routeConvention
,现在默认情况下,路由使用扁平化路由约定下面列出了 Remix v1 中具有弃用警告的其他重大更改/API 删除。如果使用的是最新1.19.3版本且没有任何控制台警告,那么可能可以继续执行所有这些操作!
(1)有破坏性更改/API移除
browserBuildDirectory
重命名为assetsBuildDirectory
devServerBroadcastDelay
devServerPort
重命名为dev.port
future.v2_dev.port
,但在稳定的2.x版本中,它将是dev.port
serverModuleFormat
从cjs
更改为esm
serverBuildTarget
serverBuildDirectory
更改为serverBuildPath
polyfill
,必须通过serverNodeBuiltinsPolyfill
选择加入polyfill
删除useTransition
删除fetcher.type
并压缩fetcher.submission
现在更准确地被归类为state:“loading”
,而不是state:“submitting”
,以更好地与底层的GET请求保持一致
要求camelCased
版本的imagesrcset/imagesizes
(2)没有弃用警告
此版本没能在每个破坏性更改或API移除上都收到废弃警告。以下是可能需要查看的剩余变更列表,以升级到v2:
browserNodeBuiltinsPolyfill
选项选择加入polyfill
PostCSS/Tailwind
将默认启用,可以通过postcss和tailwind标志禁用此功能删除createCloudflareKVSessionStorage
方法
不再支持@cloudflare/workers-types v2和v3
@remix-run/dev
删除REMIX_DEV_HTTP_ORIGIN
,增加REMIX_DEV_ORIGIN
删除REMIX_DEV_SERVER_WS_PORT
,增加dev.port
或--port
删除--no-restart/restart
标志,增加--manual/manual
删除--scheme/scheme
和--host/host
,增加REMIX_DEV_ORIGIN
删除codemod
命令
@remix-run/eslint-config
删除@remix-run/eslint-config/jest
配置
删除魔法imports
的ESLint警告
@remix-run/netlify
@remix-run/netlify
适配器已被删除,推荐使用Netlify官方适配器
@remix-run/node
默认不再对fetch
进行polyfill
,应用需要调用installGlobals()
来安装polyfills
不再从@remix-run/node
导出fetch
和相关 API,应用应使用全局命名空间中的版本
应用需要调用sourceMapSupport.install()
来设置源映射支持
@remix-run/react
删除unstable_shouldReload
,增加shouldRevalidate
@remix-run/serve
如果3000端口被占用且未指定PORT,则remix-serve
将选择一个可用的端口
集成手动模式
删除未记录的createApp Node API
在remix-serve
中保留动态imports以供外部bundle使用
@remix-run/vercel
@remix-run/vercel
适配器已被删除,推荐使用Vercel官方提供的功能
create-remix
停止传递isTypeScript
给remix.init
脚本
remix
删除魔法 exports
(3)破坏类型变化
future.v2_meta
类型中删除了 V2_
前缀,因为它们现在是默认行为。V2_MetaArgs
-> MetaArgs
V2_MetaDescriptor
-> MetaDescriptor
V2_MetaFunction
-> MetaFunction
V2_MetaMatch
-> MetaMatch
V2_MetaMatches
-> MetaMatches
V2_ServerRuntimeMetaArgs
-> ServerRuntimeMetaArgs
V2_ServerRuntimeMetaDescriptor
-> ServerRuntimeMetaDescriptor
V2_ServerRuntimeMetaFunction
-> ServerRuntimeMetaFunction
V2_ServerRuntimeMetaMatch
-> ServerRuntimeMetaMatch
V2_ServerRuntimeMetaMatches
-> ServerRuntimeMetaMatches
unknown
而不是any
,并与底层的React Router类型保持一致:将useMatches()
的返回类型从RouteMatch
改名为UIMatch
将LoaderArgs
/ActionArgs
改名为LoaderFunctionArgs
/ActionFunctionArgs
将AppData
的类型从any
改为unknown
将Location["state"]
(useLocation.state
)的类型从any
改为unknown
将UIMatch["data"]
(useMatches()[i].data
)的类型从any
改为unknown
将UIMatch["handle"]
(useMatches()[i].handle
)的类型从{ [k: string]: any }
改为unknown
将Fetcher["data"]
(useFetcher().data
)的类型从any
改为unknown
MetaMatch.handle
(在meta()
函数中使用)的类型从any
改为unknown
AppData
/RouteHandle
不再导出,因为它们只是unknown
的别名
create-remix
命令行界面工具--template
参数和不断增长的可用模板列表。--overwrite
参数bun
包管理器build.mode
检测构建模式serverNodeBuiltinsPolyfill.globals
/browserNodeBuiltinsPolyfill.globals
来对Node全局对象进行polyfill
redirectDocument
实用工具,通过重新加载文档实现重定向meta
参数中添加error
,以便可以渲染错误标题等unstable_createRemixStub
现在支持在stubbed Remix路由上添加meta/links
函数unstable_createRemixStub
不再支持在路由上使用element/errorElement
属性。必须使用Component/ErrorBoundary
与从Remix路由模块导出的内容匹配。route.lazy
方法在导航时加载路由模块。@remix-run/node
中的atob/btoa
polyfills,改用内置版本。@remix-run/dev
包与@remix-run/css-bundle
包的内容解耦。@remix-run/css-bundle
包的内容完全由Remix编译器管理。尽管仍然建议Remix依赖项共享相同的版本,但这个变化确保在升级@remix-run/dev
而不升级@remix-run/css-bundle
时没有运行时错误。remix-serve
现在将选择一个空闲的端口(如果3000端口被占用)。emix-serve
将使用该端口。remix-serve
将选择一个空闲的端口(除非3000端口已被占用)。react-router-dom@6.16.0
@remix-run/router@1.9.0
@remix-run/web-fetch@4.4.0
@remix-run/web-file@3.1.0
@remix-run/web-stream@1.1.0
Remix 对于 React Server Components(RSC)的支持计划是积极的。他们希望在Remix v3中添加对RSC的支持,并希望能够展示这项技术在多个框架中的能力。
RSC是一个有趣且强大的功能,但是 Remix v2 是基于当前稳定的React特性构建的,因此 RSC 在 Remix v2 中尚未包含。一旦RSC稳定下来,Remix 将会支持它。
然而,与之前支持的其他React特性相比,“支持RSC”需要更深入的集成。RSC的异步组件与Remix的加载器和组件结合得非常相似,并且Remix在v3中决定摒弃使用第三方库useLoaderData,因此在数据加载方面可能会有所不同。他们希望开发者只需要将现有的加载器代码迁移到新的异步组件中,但需要注意数据依赖的瀑布效应。
Remix团队在今年早些时候的Remix Conf上与React核心团队的成员举办了一个讨论会,讨论了RSC以及如何共同推进这项技术的稳定发布。他们以各种方式帮助准备RSC,并希望能够成功地集成它到Remix中。
网页题目:Remix 2.0 正式发布,现代化全栈Web框架!
标题网址:http://www.stwzsj.com/qtweb/news38/3538.html
网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联