9 月 16 日,全棧 Web 框架 Remix 正式發布了 2.0 版本,Remix 團隊在發布 1.0 版本后經過近 2 年的持續努力,發布了 19 個次要版本、100 多個補丁版本,并解決了數千個問題和拉取請求,終于迎來了第二個主要版本!
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 的并發特性
- 提供開發網頁需要所有狀態,開箱即用;提供所有需要使用的組件,包括
<Links>、<Link>、<Meta>、<Form>、<Script/>,用于處理元信息、腳本、CSS、路由和表單相關的內容- 內置錯誤處理,針對非預期錯誤處理的
<ErrorBoundary>和開發者拋出錯誤處理的<CatchBoundary>
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,改為使用單個ErrorBoundaryv2_headers,修改了嵌套路由場景中的頭部邏輯v2_meta,修改了meta()的返回格式v2_normalizeFormMethod,將formMethod規范化為大寫v2_routeConvention,現在默認情況下,路由使用扁平化路由約定下面列出了 Remix v1 中具有棄用警告的其他重大更改/API 刪除。如果使用的是最新1.19.3版本且沒有任何控制臺警告,那么可能可以繼續執行所有這些操作!
(1)有破壞性更改/API移除
browserBuildDirectory重命名為assetsBuildDirectorydevServerBroadcastDelaydevServerPort重命名為dev.portfuture.v2_dev.port,但在穩定的2.x版本中,它將是dev.portserverModuleFormat從cjs更改為esmserverBuildTargetserverBuildDirectory更改為serverBuildPathpolyfill,必須通過serverNodeBuiltinsPolyfill選擇加入polyfill刪除useTransition
刪除fetcher.type并壓縮fetcher.submission
<fetcher.Form method="get">現在更準確地被歸類為state:“loading”,而不是state:“submitting”,以更好地與底層的GET請求保持一致
要求camelCased版本的imagesrcset/imagesizes
(2)沒有棄用警告
此版本沒能在每個破壞性更改或API移除上都收到廢棄警告。以下是可能需要查看的剩余變更列表,以升級到v2:
browserNodeBuiltinsPolyfill選項選擇加入polyfillPostCSS/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 -> MetaArgsV2_MetaDescriptor -> MetaDescriptorV2_MetaFunction -> MetaFunctionV2_MetaMatch -> MetaMatchV2_MetaMatches -> MetaMatchesV2_ServerRuntimeMetaArgs -> ServerRuntimeMetaArgsV2_ServerRuntimeMetaDescriptor -> ServerRuntimeMetaDescriptorV2_ServerRuntimeMetaFunction -> ServerRuntimeMetaFunctionV2_ServerRuntimeMetaMatch -> ServerRuntimeMetaMatchV2_ServerRuntimeMetaMatches -> ServerRuntimeMetaMatchesunknown而不是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全局對象進行polyfillredirectDocument實用工具,通過重新加載文檔實現重定向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中。
本文鏈接:http://m.rrqrq.com/showinfo-26-10428-0.htmlRemix 2.0 正式發布,現代化全棧Web框架!
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: C++ extern的用法詳細解析