建站
咨詢
售后
建站咨詢
新聞中心
9 月 16 日，全棧 Web 框架 Remix 正式發(fā)布了 2.0 版本，Remix 團(tuán)隊(duì)在發(fā)布 1.0 版本后經(jīng)過(guò)近 2 年的持續(xù)努力，發(fā)布了 19 個(gè)次要版本、100 多個(gè)補(bǔ)丁版本，并解決了數(shù)千個(gè)問題和拉取請(qǐng)求，終于迎來(lái)了第二個(gè)主要版本！
成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、網(wǎng)站建設(shè)與策劃設(shè)計(jì),江北網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:江北等地區(qū)。江北做網(wǎng)站價(jià)格咨詢:028-86922220
Remix 具有以下特性：
- 追求速度、用戶體驗(yàn)（UX），支持任何 SSR/SSG 等
- 基于 Web 基礎(chǔ)技術(shù)，如 HTML/CSS 與 HTTP 以及 Web Fecth API，在絕大部分情況可以不依賴于 JavaScript 運(yùn)行，所以可以運(yùn)行在任何環(huán)境下，如 Web Browser、Cloudflare Workers、Serverless 或者 Node.js 等
- 客戶端與服務(wù)端一致的開發(fā)體驗(yàn)，客戶端代碼與服務(wù)端代碼寫在一個(gè)文件里，無(wú)縫進(jìn)行數(shù)據(jù)交互，同時(shí)基于 TypeScript，類型定義可以跨客戶端與服務(wù)端共用
- 內(nèi)置文件即路由、動(dòng)態(tài)路由、嵌套路由、資源路由等
- 去掉 Loading、骨架屏等任何加載狀態(tài)，頁(yè)面中所有資源都可以預(yù)加載（Prefetch），頁(yè)面幾乎可以立即加載
- 告別以往瀑布式（Waterfall）的數(shù)據(jù)獲取方式，數(shù)據(jù)獲取在服務(wù)端并行（Parallel）獲取，生成完整 HTML 文檔，類似 React 的并發(fā)特性
- 提供開發(fā)網(wǎng)頁(yè)需要所有狀態(tài)，開箱即用；提供所有需要使用的組件，包括
、、、、，用于處理元信息、腳本、CSS、路由和表單相關(guān)的內(nèi)容- 內(nèi)置錯(cuò)誤處理，針對(duì)非預(yù)期錯(cuò)誤處理的
和開發(fā)者拋出錯(cuò)誤處理的
Remix 是一個(gè)由 React Router 開發(fā)團(tuán)隊(duì)所開發(fā)的基于 React 和 TypeScript 的全?？蚣?。2021 年 11 月，Remix 正式開源，至今已在 Github 上獲得了 24.6k star。Remix 正式開源時(shí)，引發(fā)了前端圈不小的關(guān)注，其被普遍認(rèn)為是 Next.js 的強(qiáng)勁對(duì)手，那時(shí)隔兩年，它和 Next.js 之間的“競(jìng)爭(zhēng)”怎么樣了呢？
目前，Next.js 擁有 112k star，是 Remix 的近 5 倍。Next.js 周下載量 279 萬(wàn)，而 Remix 僅有 1.4 萬(wàn)，Next.js 是 Remix 的近 200 倍?？梢?，Remix 并沒有像大家預(yù)料的那樣，成為 Next.js 的有力競(jìng)爭(zhēng)對(duì)手，在開發(fā)者社區(qū)中只有較小的市場(chǎng)份額。盡管如此，Remix 仍然吸引了一些開發(fā)者，并且在特定領(lǐng)域或項(xiàng)目中有其優(yōu)勢(shì)和適用性。
下面就來(lái)看看 Remix 2.0 都有哪些更新！
v1.0 以來(lái)的更新
- v1.8和v1.10中，將 Remix與React Router v6進(jìn)行了對(duì)齊。當(dāng)開始開發(fā)Remix時(shí)，承諾它將使React Router變得更好。這個(gè)版本真正實(shí)現(xiàn)了這一承諾，并將兩個(gè)庫(kù)都對(duì)齊到使用相同的底層依賴。
- 在v1.11中，發(fā)布了"promises over the wire"，即延遲加載模塊?，F(xiàn)在，如果真的想在Remix應(yīng)用中添加 loading 圖標(biāo)，可以這么做了！
- 在v1.11中，添加了"flat"路由，簡(jiǎn)化了使用嵌套布局而不需要嵌套目錄的操作，這成為v2版本的默認(rèn)設(shè)置。
- 在v1.13和v1.16中，改進(jìn)了Remix對(duì)各種CSS策略的支持，包括PostCSS、CSS模塊、Vanilla Extract 和CSS副作用（全局）導(dǎo)入。
- 在v1.14和v1.18中，發(fā)布了一個(gè)新的開發(fā)服務(wù)器，支持熱更新（HMR）和熱數(shù)據(jù)重載（HDR）。這個(gè)新的開發(fā)服務(wù)器成為v2版本的默認(rèn)設(shè)置。
- 在v2版本中，最重要的亮點(diǎn)之一是全新的
create-remix命令行工具體驗(yàn)。
v2.0 的更新內(nèi)容
重大變化
升級(jí)的依賴要求
Remix v2已經(jīng)升級(jí)了對(duì)React和Node的最低版本支持，并正式支持以下版本：
- React 18
- Node 18 或更高版本
移除未來(lái)標(biāo)志
以下未來(lái)標(biāo)志已被移除，并且它們的行為現(xiàn)在是默認(rèn)的，現(xiàn)在可以從remix.config.js文件中刪除這些設(shè)置。
v2_dev，新的開發(fā)服務(wù)器，具有HMR + HDR，如果在future.v2_dev中有配置而不僅僅是布爾值（例如，future.v2_dev.port），可以將它們提升到remix.config.js中的根dev對(duì)象中。v2_errorBoundary，移除了CatchBoundary，改為使用單個(gè)ErrorBoundaryv2_headers，修改了嵌套路由場(chǎng)景中的頭部邏輯v2_meta，修改了meta()的返回格式v2_normalizeFormMethod，將formMethod規(guī)范化為大寫v2_routeConvention，現(xiàn)在默認(rèn)情況下，路由使用扁平化路由約定
重大變更/API 刪除
下面列出了 Remix v1 中具有棄用警告的其他重大更改/API 刪除。如果使用的是最新1.19.3版本且沒有任何控制臺(tái)警告，那么可能可以繼續(xù)執(zhí)行所有這些操作！
（1）有破壞性更改/API移除
- remix.config.js
- 將
browserBuildDirectory重命名為assetsBuildDirectory - 刪除
devServerBroadcastDelay - 將
devServerPort重命名為dev.port - 如果在1.x版本中選擇此選項(xiàng)，則配置標(biāo)記將是
future.v2_dev.port，但在穩(wěn)定的2.x版本中，它將是dev.port - 將默認(rèn)的
serverModuleFormat從cjs更改為esm - 刪除
serverBuildTarget - 將
serverBuildDirectory更改為serverBuildPath - 默認(rèn)情況下不再在服務(wù)器上對(duì)Node內(nèi)置模塊進(jìn)行
polyfill，必須通過(guò)serverNodeBuiltinsPolyfill選擇加入polyfill
- @remix-run/react
刪除
useTransition刪除
fetcher.type并壓縮fetcher.submissionstate：“l(fā)oading”，而不是state：“submitting”，以更好地與底層的GET請(qǐng)求保持一致要求
camelCased版本的imagesrcset/imagesizes
（2）沒有棄用警告
此版本沒能在每個(gè)破壞性更改或API移除上都收到廢棄警告。以下是可能需要查看的剩余變更列表，以升級(jí)到v2：
- remix.config.js
- Node內(nèi)置模塊不再默認(rèn)在瀏覽器中進(jìn)行polyfill，可以通過(guò)
browserNodeBuiltinsPolyfill選項(xiàng)選擇加入polyfill - 如果存在配置文件，則
PostCSS/Tailwind將默認(rèn)啟用，可以通過(guò)postcss和tailwind標(biāo)志禁用此功能
- @remix-run/cloudflare
刪除
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標(biāo)志，增加--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
默認(rèn)不再對(duì)
fetch進(jìn)行polyfill，應(yīng)用需要調(diào)用installGlobals()來(lái)安裝polyfills不再?gòu)?code>@remix-run/node導(dǎo)出
fetch和相關(guān) API，應(yīng)用應(yīng)使用全局命名空間中的版本應(yīng)用需要調(diào)用
sourceMapSupport.install()來(lái)設(shè)置源映射支持@remix-run/react
刪除
unstable_shouldReload，增加shouldRevalidate@remix-run/serve
如果3000端口被占用且未指定PORT，則
remix-serve將選擇一個(gè)可用的端口集成手動(dòng)模式
刪除未記錄的
createApp Node API在
remix-serve中保留動(dòng)態(tài)imports以供外部bundle使用@remix-run/vercel
@remix-run/vercel適配器已被刪除，推薦使用Vercel官方提供的功能create-remix
停止傳遞
isTypeScript給remix.init腳本remix
刪除魔法
exports
（3）破壞類型變化
- 從
future.v2_meta類型中刪除了V2_前綴，因?yàn)樗鼈儸F(xiàn)在是默認(rèn)行為。
V2_MetaArgs->MetaArgsV2_MetaDescriptor->MetaDescriptorV2_MetaFunction->MetaFunctionV2_MetaMatch->MetaMatchV2_MetaMatches->MetaMatchesV2_ServerRuntimeMetaArgs->ServerRuntimeMetaArgsV2_ServerRuntimeMetaDescriptor->ServerRuntimeMetaDescriptorV2_ServerRuntimeMetaFunction->ServerRuntimeMetaFunctionV2_ServerRuntimeMetaMatch->ServerRuntimeMetaMatchV2_ServerRuntimeMetaMatches->ServerRuntimeMetaMatches
- 以下類型已進(jìn)行調(diào)整，更偏向于使用
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改為unknownMetaMatch.handle（在meta()函數(shù)中使用）的類型從any改為unknownAppData/RouteHandle不再導(dǎo)出，因?yàn)樗鼈冎皇?code>unknown的別名
新增功能
- 新的
create-remix命令行界面工具
- 最顯著的改變是，不再使用下拉菜單選擇模板/堆棧，而是使用
--template參數(shù)和不斷增長(zhǎng)的可用模板列表。 - 新增
--overwrite參數(shù) - 支持
bun包管理器
- 通過(guò)
build.mode檢測(cè)構(gòu)建模式 - 支持通過(guò)
serverNodeBuiltinsPolyfill.globals/browserNodeBuiltinsPolyfill.globals來(lái)對(duì)Node全局對(duì)象進(jìn)行polyfill - 新的
redirectDocument實(shí)用工具，通過(guò)重新加載文檔實(shí)現(xiàn)重定向 - 在
meta參數(shù)中添加error，以便可以渲染錯(cuò)誤標(biāo)題等 unstable_createRemixStub現(xiàn)在支持在stubbed Remix路由上添加meta/links函數(shù)unstable_createRemixStub不再支持在路由上使用element/errorElement屬性。必須使用Component/ErrorBoundary與從Remix路由模塊導(dǎo)出的內(nèi)容匹配。
其他更新
- Remix現(xiàn)在在內(nèi)部使用React Router的
route.lazy方法在導(dǎo)航時(shí)加載路由模塊。 - 刪除了
@remix-run/node中的atob/btoapolyfills，改用內(nèi)置版本。 - 將
@remix-run/dev包與@remix-run/css-bundle包的內(nèi)容解耦。 - 現(xiàn)在，
@remix-run/css-bundle包的內(nèi)容完全由Remix編譯器管理。盡管仍然建議Remix依賴項(xiàng)共享相同的版本，但這個(gè)變化確保在升級(jí)@remix-run/dev而不升級(jí)@remix-run/css-bundle時(shí)沒有運(yùn)行時(shí)錯(cuò)誤。 remix-serve現(xiàn)在將選擇一個(gè)空閑的端口（如果3000端口被占用）。
- 如果設(shè)置了PORT環(huán)境變量，r
emix-serve將使用該端口。 - 否則，
remix-serve將選擇一個(gè)空閑的端口（除非3000端口已被占用）。
- 更新的依賴項(xiàng)：
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
React Server Components？
Remix 對(duì)于 React Server Components（RSC）的支持計(jì)劃是積極的。他們希望在Remix v3中添加對(duì)RSC的支持，并希望能夠展示這項(xiàng)技術(shù)在多個(gè)框架中的能力。
RSC是一個(gè)有趣且強(qiáng)大的功能，但是 Remix v2 是基于當(dāng)前穩(wěn)定的React特性構(gòu)建的，因此 RSC 在 Remix v2 中尚未包含。一旦RSC穩(wěn)定下來(lái)，Remix 將會(huì)支持它。
然而，與之前支持的其他React特性相比，“支持RSC”需要更深入的集成。RSC的異步組件與Remix的加載器和組件結(jié)合得非常相似，并且Remix在v3中決定摒棄使用第三方庫(kù)useLoaderData，因此在數(shù)據(jù)加載方面可能會(huì)有所不同。他們希望開發(fā)者只需要將現(xiàn)有的加載器代碼遷移到新的異步組件中，但需要注意數(shù)據(jù)依賴的瀑布效應(yīng)。
Remix團(tuán)隊(duì)在今年早些時(shí)候的Remix Conf上與React核心團(tuán)隊(duì)的成員舉辦了一個(gè)討論會(huì)，討論了RSC以及如何共同推進(jìn)這項(xiàng)技術(shù)的穩(wěn)定發(fā)布。他們以各種方式幫助準(zhǔn)備RSC，并希望能夠成功地集成它到Remix中。
網(wǎng)頁(yè)名稱：Remix 2.0 正式發(fā)布，現(xiàn)代化全棧Web框架！
地址分享：http://fisionsoft.com.cn/article/cdhdijd.html
