用 npm-check-updates 幫助你更新專案套件吧!

前言

老實講,老舊專案要更新套件真的是一件超級麻煩的事情,所以這一篇就來分享一下如何更新 package.json 中的套件版本吧!

更新 npm 套件

通常我們每過一段時間會去更新一下專案中的套件,更新的原因大多都是有新的功能或是修復了一些 bug,又或者我們必須要更新 Node.js 的版本,以我自己來講,就很常遇到需要升級 Node.js 版本,而套件在你輸入 npm install [套件名稱] 的時候都會依據你當前 Node.js 版本去安裝相對應的套件版本,所以當你的 Node.js 版本升級了,你的套件版本也會跟著升級,這時候你就需要去更新你的 package.json 中的套件版本。

Note
後面我會使用我先前做的一個專案,也就是「web-layout-training-gulp」來當作示範,並且是 feature/bs5 這個分支,而這份專案是在 Node.js 版本 11.7.0 下建立的。

通常老舊版本的 Node.js 我們不太會直接跳到最新版,還是會顧慮一下可以升級的版本,以我這一份專案來講就比較適合升級到 Node.js 14,所以我就會輸入以下指令

1
2
nvm use 14 # 切換到 Node.js 14
npm install

基本上你輸入 gulp 之後是可以正常運作並開啟的。

確定環境在 Node.js 14 下可以正常運作後,我們就可以準備來更新套件了,首先我們可以輸入以下指令:

1
npm update --save

Note
如果你只是單純輸入 npm update 的話,你的 package.json 中的套件版本是不會被更新的,所以記得要加上 --save 這個參數

這樣你的 package.json 中的套件版本就會被更新了

套件更新

npm-check-updates

你應該滿好奇一件事情,我都可以用「npm update --save」更新套件了,為什麼還要特別用 npm-check-updates 呢?

其實如果你有認真去看一下你的套件,你會發現有許多套件並沒有真的被更新,那我們該如何知道呢?這時候就可以使用 npm-check-updates 這個套件了,這個套件可以幫助你檢查你的套件是否有新的版本,並且可以幫你更新 package.json 中的套件版本。

首先我們要先安裝 npm-check-updates 這個套件,使用方式有兩種

1
2
3
npm install -g npm-check-updates # 將套件安裝在你的電腦上
# 或是
npx npm-check-updates # 直接使用 npx 來使用套件

Note
npx 是可以讓你直接使用 npm-check-updates 這個套件,而不用安裝在你的電腦上。

後面這邊我會直接示範使用 npx 來使用 npm-check-updates 這個套件,首先我們可以輸入以下指令:

1
npx npm-check-updates

輸入完畢後,你會發現有一票的套件都沒有被更新…

更新列表

接著你可以使用以下指令檢查你的套件是否有新的版本並且更新 package.json 中的套件版本:

1
npx npm-check-updates -u

輸入完畢後記得要再輸入 npm install 來安裝新的套件版本,這樣你的專案套件就會使用最新版的套件了。

修正 Gulp 錯誤

接下來就是修正一些錯誤,當你 npm install 跑完後再輸入 gulp 會噴出以下錯誤:

錯誤

1
2
3
4
5
6
7
8
Error in plugin "gulp-sass"
Message:

gulp-sass no longer has a default Sass compiler; please set one yourself.
Both the "sass" and "node-sass" packages are permitted.
For example, in your gulpfile:

const sass = require('gulp-sass')(require('sass'));

其實這一段錯誤就只是因為 node-sass 被淘汰了,所以要微調一下 gulpfile.js,並改安裝 sass 套件,請幫我輸入以下指令安裝 sass 套件並移除 node-sass 套件:

1
2
npm install sass
npm uninstall node-sass

接著打開 gulpfile.js,並且將 gulp-sass 的引入方式改成以下以及調整 sass 函式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const gulp = require('gulp');
const $ = require('gulp-load-plugins')({ lazy: false });
const autoprefixer = require('autoprefixer');
const minimist = require('minimist');
const browserSync = require('browser-sync').create();
const gulpSass = require('gulp-sass')(require('sass'));

// ... 省略

function sass() {
const plugins = [
autoprefixer(),
];
return gulp.src(envOptions.style.src)
.pipe($.sourcemaps.init())
// $.sass 改成 gulpSass
.pipe(gulpSass({
outputStyle: envOptions.style.outputStyle,
includePaths: envOptions.style.includePaths,
}).on('error', gulpSass.logError)) // $.sass 改成 gulpSass
.pipe($.postcss(plugins))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest(envOptions.style.path))
.pipe(
browserSync.reload({
stream: true,
}),
);
}

接下來再輸入 gulp 就會變成另一個錯誤訊息:

1
2
3
Message:
PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:

其實也算好解決,安裝一下 postcss 就好了

1
npm install postcss

接著再輸入 gulp 就會正常運作了~

不得不說你會發現更新環境是一件多麻煩的事情…QQ

結語

雖然官方提供的方式是 npm update 就可以達到更新套件的需求,但搭配 npm-check-updates 這個套件可以更快速的幫助你檢查你的套件是否有新的版本,並且依據你的需求來更新 package.json 中的套件版本,這樣你就可以更快速的更新你的專案套件了。

(謎之聲:以前用 npm update 時常會遇到一些怪問題,所以我都會用 npm-check-updates 來更新套件)

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ