旅行的記憶

最近經手某個小專案。原本只是需要升級這個專案裡面的某個內部依賴函式庫，稍微看了一下發現規模並不複雜，於是就順便升級看看。

專案本身有用到 yarn , babel 和 webpack 。

之前碰過的其他專案也有類似的瓶頸，卡在要從原本的 babel-* 換成 @babel/* ，也就是 babel v7 。 @babel/* 其實支援 nodejs 8 ，但如果把它所有相關的套件一併升級，會得到類似以下的結果：

nvm use 8
// 本來是 8.17
yarn remove babel-core
// ok
yarn add @babel/core --dev
// warning，先不理它
yarn remove babel-preset-env
// ok
yarn add @babel/preset-env --dev
// warning，先不理它
yarn remove babel-loader
// ok
yarn add babel-loader --dev
// error find-up@5.0.0: The engine "node" is incompatible with this module. Expected version ">=10". Got "8.17.0"
nvm install 10
yarn add babel-loader --dev
// error babel-loader@10.0.0: The engine "node" is incompatible with this module. Expected version "^18.20.0 || ^20.10.0 || >=22.0.0". Got "10.24.1"

看了一下 npmjs 的說明， babel-loader 的三個大版本分別對應 8.9 以上、 14.15 以上和 18.20 以上。

於是先升級到 14.15 看看。

nvm install 14.15 
yarn add babel-loader@8 --dev
// ok

搞定了之後再來升級 webpack 。

yarn remove webpack
// ok
yarn add webpack --dev
// ok
yarn remove webpack-cli
// ok
yarn add webpack-cli --dev
// error commander@12.1.0: The engine "node" is incompatible with this module. Expected version ">=18". Got "14.15.5"

(╯°□°）╯︵ ┻━┻

既然都要升 18.20 了，那就乾脆衝 22 啊⋯

nvm install 22
yarn add @babel/core @babel/preset-env babel-loader webpack webpack-cli --dev
// (node:10259) [DEP0170] DeprecationWarning: The URL git+ssh://git@github.com:.....git is invalid. Future versions of Node.js will throw an error.

修掉 git+ssh:// 的 url deprecation ，再把 webpack config 裡原本的 babel-preset-env 換成 @babel/preset-env ：

// 部份省略
module.exports = {
  module: {
    rules: [
      {
        use: {
          loader: "babel-loader",
          options: {
              presets: ["@babel/preset-env"],
          },
        },
      }
    ]
  },
};

最後加上一些內部的微調，更新 README ，加上 .nvmrc ，升版完合併回 master 上線，收工。