Find N3入網：最高支持16+1TB
OPPO將于近期登場的Find N3折疊屏目前已經正式入網，型號為PHN110。本次Find N3在外觀方面相比前兩代有很大的變化，不再是小號的橫向折疊屏，而是跟別的廠商一樣采用了較為常見的
11 月 16 日，Vite 5.0 正式發布，這是 Vite 道路上的又一個重要里程碑！Vite 現在使用 Rollup 4，這已經代表了構建性能的大幅提升。此外，還有一些新的選項可以改善開發服務器性能。
Vite 4 發布于近一年前，它為生態系統奠定了堅實的基礎。隨著項目繼續在共享基礎設施上構建，每周 npm 下載量從 250 萬躍升至 750 萬。框架不斷創新，除了 Astro、Nuxt、SvelteKit、Solid Start、Qwik City 等，還看到新的框架加入并使生態系統更加強大。RedwoodJS 和 Remix 轉向 Vite 為 React 生態系統的進一步采用鋪平了道路。Vitest 的增長速度甚至超過了 Vite。其團隊一直在努力，很快將發布 Vitest 1.0。Vite 與 Storybook、Nx 和 Playwright 等其他工具一起使用的故事不斷改進，環境也是如此，Vite 在 Deno 和 Bun 中都是可以使用的。
六個月前，Vite 4.3 版本發布。該版本顯著提高了開發服務器的性能。然而，仍有很大的改進空間。在 ViteConf 上，尤雨溪公布了 Vite 的長期計劃，即致力于開發 Rolldown，這是一個帶有兼容 API 的 Rust 移植版的 Rollup。一旦準備就緒，打算在 Vite Core 中使用它來承擔 Rollup 和 esbuild 的任務。這將意味著提高構建性能，并大大減少開發和構建之間的不一致。Rolldown 目前處于早期階段，團隊正準備在年底前開源代碼庫。敬請關注！
Vite 5 專注于清理 API（刪除不推薦使用的功能），并簡化了解決長期問題的幾個功能，例如切換定義以使用正確的 AST 替換而不是 regex。團隊還將繼續采取措施來實現未來的 Vite（Node.js 18+ 現在是必需的，CJS Node API 已被棄用）。
可以使用 pnpm create vite 用喜歡的框架搭建 Vite 項目，或者使用 vite.new 在線打開啟動模板來使用 Vite 5。還可以運行 pnpm create vite-extra 來訪問其他框架和運行時（Solid、Deno、SSR 和庫啟動器）的模板。當在“其他”選項下運行 create vite 時，也可以使用 create vite-extra 模板。
注意，Vite 入門模板旨在用作使用不同框架測試 Vite 的平臺。在構建下一個項目時，建議使用每個框架推薦的啟動器。一些框架現在也將 create vite 重定向到它們的啟動器（Vue 的 create-vue 和 Nuxt 3，以及 Svelte 的 SvelteKit）。
Vite 不再支持已 EOL 的 Node.js 14 / 16 / 17 / 19。現在需要 Node.js 18 / 20+。
除了 Rollup 4 的構建性能改進之外，還有一個新指南可幫助你識別和修復常見性能問題：https://vitejs.dev/guide/performance。
Vite 5 還引入了 server.warmup，這是一項改善啟動時間的新功能。它允許定義應在服務器啟動后立即進行預轉換的模塊列表。當使用 --open 或 server.open 時，Vite 還會自動預熱應用的入口點或提供的 URL 以打開。
Vite 現在使用 Rollup 4，它也帶來了重大變化，包括：
Vite的CJS Node API 已被棄用。當調用require('vite')時，現在會記錄棄用警告。應該更新文件或框架，以導入Vite的ESM構建而不是CJS構建。
在基本的Vite項目中，請確保：
對于其他項目，有一些常見的方法：
在 Vite 4 中，define和import.meta.env.*功能在開發和構建中使用不同的替換策略：
這導致在嘗試訪問這些變量時出現開發環境和構建環境的不一致性，有時甚至會導致構建失敗。例如：
// vite.config.jsexport default defineConfig({ define: { __APP_VERSION__: JSON.stringify('1.0.0'), },})const data = { __APP_VERSION__ }// dev: { __APP_VERSION__: "1.0.0" } ?// build: { "1.0.0" } ?const docs = 'I like import.meta.env.MODE'// dev: "I like import.meta.env.MODE" ?// build: "I like "production"" ?Vite 5 通過使用 esbuild 來處理構建中的替換，與開發行為保持一致。
這個改變不應該影響大多數設置，因為已經有文檔說明define的值應該遵循 esbuild 的語法：
為了與 esbuild 的行為保持一致，表達式必須是一個 JSON 對象（null、boolean、number、string、array或object）或者一個單個的標識符。
然而，如果你更喜歡直接保持靜態替換值，可以使用 @rollup/plugin-replace[1]。
在 Vite 4 中，worker.plugins接受一個插件數組((Plugin | Plugin[])[])。而在 Vite 5 中，它需要配置為一個返回插件數組的函數(() => (Plugin | Plugin[])[])。這個改變是為了使并行的工作器構建更加一致和可預測。
. 的路徑回退到 index.html在 Vite 4 中，在開發環境中訪問包含點"."的路徑時，即使將appType設置為'spa'（默認值），也不會回退到index.html。而在 Vite 5 中，它將會回退到index.html。
注意，如果將圖像路徑指向一個不存在的文件（例如<img src="./file-does-not-exist.png">），瀏覽器將不再在控制臺中顯示 404 錯誤消息。
在 Vite 4 中，開發服務器和預覽服務器根據目錄結構和末尾斜杠來不同地提供HTML服務。這會導致在測試構建后的應用時出現不一致性。Vite 5 將重構成以下類似的單一行為，假設以下文件結構：
├── index.html├── file.html└── dir └── index.html
默認情況下，Vite 4 中的清單文件（build.manifest和build.ssrManifest）是在構建的根目錄中生成的。
而從 Vite 5 開始，默認情況下它們將會生成在.build.outDir目錄中的.vite目錄中。這個改變有助于避免公共文件與相同的清單文件名在復制到build.outDir時發生沖突。
現在，CLI的快捷方式（例如r鍵重啟開發服務器）需要額外按下Enter鍵才能觸發快捷方式。例如，按下r鍵后再按Enter鍵來重啟開發服務器。
這個改變防止 Vite 吞噬和控制特定于操作系統的快捷方式，使得將 Vite 開發服務器與其他進程結合使用時更加兼容。
Vite 5 使用 esbuild 0.19，并移除了對 esbuild 0.18 的兼容層，這改變了 experimentalDecorators 和 useDefineForClassFields 的處理方式。
因此，建議在配置tsconfig.json時將目標設置為ESNext或ES2022或更新版本，或者顯式將useDefineForClassFields設置為true。
{ "compilerOptions": { // 如果使用裝飾器，設置為true "experimentalDecorators": true, // 如果在瀏覽器中看到解析錯誤，設置為true "useDefineForClassFields": true }}-https標志在內部設置了server.https: true和preview.https: true。這個配置原本是用來與 Vite 3 中取消的自動 https 證書生成功能一起使用的。因此，這個配置不再有用，因為它會啟動一個沒有證書的 Vite HTTPS 服務器。
如果使用的是@vitejs/plugin-basic-ssl或vite-plugin-mkcert，它們已經在內部設置了 https 配置，所以可以在設置中移除--https、server.https: true和preview.https: true。
resolvePackageEntry和resolvePackageData API已被移除，因為它們暴露了 Vite 的內部結構，并阻礙了過去 Vite 4.3 的潛在優化。可以使用第三方包替代這些API，例如：
import { resolve } from 'import-meta-env'import { findDepPkgJsonPath } from 'vitefu'import fs from 'node:fs'const pkg = 'my-lib'const basedir = process.cwd()// `resolvePackageEntry`:const packageEntry = resolve(pkg, basedir)// `resolvePackageData`:const packageJsonPath = findDepPkgJsonPath(pkg, basedir)const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'))[1]@rollup/plugin-replace： https://github.com/rollup/plugins/tree/master/packages/replace。
[2]import.meta.resolve]： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta/resolve。
[3]import-meta-resolve： https://github.com/wooorm/import-meta-resolve。
[4]vitefu： https://github.com/svitejs/vitefu。
本文鏈接：http://www.www897cc.com/showinfo-26-27588-0.htmlVite 5.0 正式發布，這是 Vite 道路上的又一個重要里程碑！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 使用Docker來編排Web應用
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號