nodeバージョンを8系->12系に上げた際にやったこと

先日、Webアプリの静的ファイルビルドで利用しているnodeのバージョンアップを行いました。

nodeといいつつrubyも一部使っていたため一緒に上げていますが、以下、node+関連ライブラリバージョンアップのメモ書きです。

更新前の各種ライブラリ概要

• node（v8.11.1）
• yarn（1.16.0）
• gulp（3.9.0）
• webpack（4.1.0）
• ruby（2.4.2、jekyll用）

やったこと

nodeバージョンアップ

$ ndenv install v12.4.0
$ npm install -g yarn

rubyバージョンアップ

$ rbenv install 2.6.3

各種nodeライブラリバージョンアップ

記事下方の参考リンクを見つつ、以下のタスクを行いました。

• node_modulesを最新に更新

$ yarn upgrade --latest

• gulp 3系 -> 4系に伴う修正
  • gulpfile.jsの修正
• babel 6系 -> 7系に伴う修正
  • babel-core -> @babel/coreに置き換え
  • polyfillのimportをやめた
• スプレット演算子（...）でエラーになっていたコードを修正
• webpackのplugin関連修正
  • ES5で対応止まっているuglify-jsをterserで置き換え
    • 他候補のbabel-minifyよりもteserの方がuglify-jsに近い使い方ができそうでした
    • uglify-js-pluginで使用していたuglify-save-licenseがそのまま使えました（extractComments: saveLicenseのようにオプションで指定できた）

かかった期間

他の作業もやりつつですが、7営業日程度でした。

参考リンク

• https://qiita.com/teinen_qiita/items/18ca1fb433914e09c9e4#yarn-upgrade---latest
• https://satoyan419.com/gulp-v4/
• https://qiita.com/tatsuo-iriyama/items/08ba4bd621b7fdedcc4e
• https://qiita.com/oreo3@github/items/b383c57949e0f117cbea
• https://babeljs.io/docs/en/babel-polyfill
• https://ginpen.com/2018/12/20/spread-syntax/
• https://stackoverflow.com/questions/42633716/unexpected-token-punc-expected-punc-when-creating-chunk-from-uglifyjs
• https://www.monotalk.xyz/blog/Remove-all-JavaScript-comments-when-compressing-Webpack-4/
• https://qiita.com/shinnn/items/57327006390f2181f550