用 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 來更新套件）