[Day 30] Nuxt 3 版本的升級與套件升級的管理工具

2023 iThome 鐵人賽

DAY 30

Vue.js

Nuxt 3 實戰筆記系列第 30 篇

15th鐵人賽 nuxt 3 nuxt3 vue.js vue

Ryan

團隊啾嚕咕嚕跳起來

2023-10-15 17:40:30

1437 瀏覽

分享至

Nuxt 3 版本的升級

目前 Nuxt 3 仍積極的在修正錯誤與添加新功能，版本更新的速度也不慢，相較去年底，目前正式版釋出後已經穩定許多，與其他大型的開源框架一樣，版本的發布皆會在 GitHub 中的 Releases 與 NPM 上釋出，並描述版本的修正、重構、文件與貢獻者等等。

建議你在準備升級 Nuxt 的版本之前，瀏覽一下每個版本之間的這些調整與變更 (Changelog)，某些情況下可能會發生打破向後相容性 (Break Change) 的情況，這時再升級前就一定要仔細閱讀說明文件。

當你評估確認沒問題後，就可以開始進行 Nuxt 版本的升級，在 Nuxt 3 的專案中，你可以使用 Nuxt CLI 來進行版本的升級，每個版本釋出的說明多數也會提及升級的方式與指令。

例如，升級的指令為 nuxi upgrade 表示你可以直接使用 Nuxt CLI 的 upgrade 來直接進行升級。

npx nuxi@latest upgrade

接下來，你只需要確認終端機的提示，並決定是否要刪除與重新建立 node_modules 與 package-lock.json 檔案，選擇 Yes 或 No 之後，基本上升級就會自動完成。

升級時所詢問的重新建立 node_modules 與 package-lock.json 檔案問題，當你選擇 Yes 與直接在 Nuxt CLI 的 upgrade 指令上添加 --force 參數相同，通常會選擇 Yes 或加上 --force 參數，可能是新版本說明上的建議，或是再升級時遇到了一些狀況，你可以嘗試這麼做。

一般來說，建議先進行專案的備份或升級前的版本控制，接下來再依照版本說明與嘗試不添加參數方式來進行升級，如果真的遇到狀況可以恢復升級前的版本，並嘗試加上 --force 參數或刪除 node_modules 與 package-lock.json 後再來進行升級。

如果版本說明上有一些破壞性的變更 Break Change，請依據說明的步驟來逐步調整，只要搭配版本控制慢慢來進行升級與微調，都是可以順利完成的，而其他的外部套件或相依模組，如果真的還沒支援新版本就得等待釋出或手動嘗試修正。

套件升級的管理工具

Nuxt 3 的專案中，除了核心的套件外，我們在開發網站也可能會依賴一些外部的套件與模組，這些套件也會隨著時間與相依的套件來釋出新版本，如果你的專案中，有數十個套件需要定期做檢查與更新，在管理與維護升級上肯定也會相對的麻煩，這時候你可以借住套件升級的管理工具來協助你。

npm-check-updates

npm-check-updates 是 NPM 上的一個套件，它可以用來檢查 package.json 檔案，並確認專案所相依的套件是否有新版本，並在終端機以視覺化與可互動的方式，提供使用者決定要升級的套件，對於套件版本的管理與升級相當的方便。

安裝

你可以將 npm-check-updates 安裝至使用全域，如此一來就可以使用 ncu 指令來開始進行檢查升級的操作。

npm install -g npm-check-updates

你也可以使用 NPM 的 npx 來執行 npm-check-updates

npx npm-check-updates

基本使用方式

執行下列指令，來檢查專案中相依套件的最新版本

ncu
#
npx npm-check-updates

接下來你可以在終端機上看到所列出來的套件名稱、目前的版本與最新的版本。

紅色: 通常重大升級可能具有破壞性的更新與特性，屬於主要升級 (Major upgrade)
青色: 通常是小版本或釋出新功能的更新，屬於次要升級 (Minor upgrade)
綠色: 通常是補丁或小修正 (Patch upgrade)

當你確認沒問題後，可以在指令上添加 -u 的參數來完成版本的升級，npm-check-updates 會幫你替換掉 package.json 檔案內套件的版本號，最後你需要再次的執行 npm install 來進行安裝。

互動式的升級方式

有些時候，我們並不是要一次性的全部升級，會依據版本及所需來決定要升級的套件，npm-check-updates 提供了 -i, --interactive 的參數，可以提供可互動的模式來更新套件。

你可以使用下列指令來進行套件的檢查與升級

npx npm-check-updates -i

你可以使用方向鍵來移動指標，對所指定套件選取是否要更新，鍵盤的 a 按鍵可以全選或全反選，空白鍵可以單獨的選取或取消，決定好要升級的版本後，按下 Enter 按鍵就會完成 package.json 檔案內套件的版本號的替換，最後也會提示是否要使用 npm install 來進行新版本的安裝，你可以按下 y 按鍵，來完成套件版本的更新。

不同類型的新版本的群組分類

npm-check-updates 也提供格式化的參數 --format group，可以將套件最新版本依據版本升級的類型來進行群組分類，這樣在決定套件版本升級時也更加的方便。

npx npm-check-updates -i --format group

如此一來，你就可以看到套件列表依據新版本的類型 Patch、Minor 與 Major 進行了分類。

npm-check-updates 也提供了不少參數選項可以來做更細膩的控制，你可以參考官方文件來有效地管理專案的套件版本。

Taze

Taze 作為一個 CLI 的工具，用途也是確保專案所依賴的套件能保持最新的版本，內建了對 monorepos 的支援及預設安全的版本更新策略。

安裝

你可以將 Taze 安裝至使用全域，如此一來就可以使用 taze 指令來開始進行檢查升級的操作。

npm install -g taze

你也可以使用 NPM 的 npx 來執行 taze

npx taze

基本使用方式

執行下列指令，來檢查專案中相依套件的最新版本

taze
#
npx taze

預設情況，你使用 taze 指令，所列出來的套件，僅包含 Minor 與 Patch 的更新的新版本，這是為了確保在升級時包含了主要版本的更新變動，而因為套件新版本的特性與功能不一致，導致發生異常錯誤。

同樣的再升級時，你可以看到套件名稱、目前版本、最新版本及釋出距今的時間，你可以在指令中添加 -w 參數來將新版本寫入 package.json 檔案內

當複寫新版本至 package.json 檔案後，你就可以使用 npm i 或 npm install 來安裝更新套件。

你也可以更新主要版本，你可以添加 major 的參數來做使用。

預設情況下 Taze 會更佳的方便與快速，但也因為沒有提供交互式的功能所以要自訂所更新的套件，就需要使用其他參數如 --include 和 --exclude 來過濾與包含套件，算是比較小缺點，但也因為預設安全的關係，多數情況你可以放心的直接做版本的更新。

小結

對於我們的 Nuxt 3 專案而言，使用保持最新的 Nuxt 版本多數情況是良好的，官方也提供了方便的 Nuxt CLI 來協助升級的動作，而專案內使用到的外部套件或模組，你也需要定期的進行升級與確認，避免一些資安漏洞或 Bug 的產生，透過 npm-check-updates 與 Taze 你可以免去逐一升級的繁瑣過程，更可以確保升級時可以安全的進行套件的更新，這些也是 Nuxt 3 實戰中，除了開發上也要特別注意的維護事項。

今年的鐵人賽也終於最終章了，恭喜自己能完成這次兩個主題的挑戰，也感謝愛人與毛小孩給予支持能量 ❤️
如果你對 Nuxt 3 有興趣，可以關注我寫的一些筆記與影片，希望能幫助到你學習 Nuxt 3。

最後，祝大家學習 Nuxt 與網站開發能一切順利。

感謝大家的閱讀，歡迎大家給予建議與討論，也請各位大大鞭小力一些：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

參考資料

[Day 29] Nuxt 3 混合渲染 (Hybrid Rendering) 中的 SWR 與 ISR

系列文

Nuxt 3 實戰筆記共 30 篇

RSS系列文訂閱系列文

52 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 則留言

碼農

iT邦新手 4 級 ‧ 2024-02-29 16:05:05

哈囉～請問大大有在nuxt用過
resize + draggable的套件嗎
可以推薦一下嗎

我用了三種都不能正常運作
只有這個差一點點只差不能縮放
https://github.com/mauricius/vue-draggable-resizable/issues/402

回應 1
檢舉

Ryan iT邦新手 1 級 ‧ 2024-03-03 00:47:58 檢舉

嗨嗨，依據您提供的套件我這邊測試看起來可以正常的使用

安裝

npm install -D vue-draggable-resizable

建立插件 plugins/vue-draggable-resizable.client.js

import { defineNuxtPlugin } from '#app';
import VueDraggableResizable from 'vue-draggable-resizable';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('vue-draggable-resizable', VueDraggableResizable);
});

編輯 App.vue 開始使用

<template>
  <div>
    <ClientOnly>
      <div
        style="
          height: 500px;
          width: 500px;
          border: 1px solid red;
          position: relative;
        "
      >
        <vue-draggable-resizable :w="100" :h="100" :parent="true">
          <img
            style="width: 100%; height: 100%; object-fit: cover"
            src="https://picsum.photos/id/11/367/267"
          />
        </vue-draggable-resizable>
      </div>
    </ClientOnly>
  </div>
</template>

<style>
@import 'vue-draggable-resizable/style.css';
</style>

您可以參考下列這個專案：
https://stackblitz.com/edit/nuxt-starter-qzdbtj?file=plugins%2Fvue-draggable-resizable.client.js,app.vue

登入發表回應