TES Blog

株式会社テクニカルエンジニアリングサポートに所属する社員が、自身が携わるテクノロジーやイベントに関する情報を発信しています。

Electron + Nuxt.js アプリのバージョンアップ

はじめに 📌

Electron + Nuxt.js の環境で個人開発をしているのですが、どちらもバージョンが古くなってしまったので、バージョンアップをしました。
その際に躓きポイントがあったりしたので、バージョンアップ完了までの手順をまとめました。

Electron + Nuxt.js の環境作りには、 Nuxt.js の公式が出している nuxt-community/electron-template から作ってます。
ただし、こちらはまともにメンテンスがされておらず、本番向けに build してもそのままでは動かない始末なので、今から構築する方は利用しない方が良いです。

代わりに、下記を参考にイチから自分で構築するか、
Nuxt.js+Electronを試してみる - Qiita

下記のテンプレートを利用して作るのが良いと思います。
GitHub - saltyshiomix/nuxtron: ⚡ Electron + Nuxt.js ⚡

ちなみに、私の環境では CoffeeScriptPugSass を利用しています。 CoffeeScript は本記事にほとんど関係していないので、 TypeScript でも JavaScript でも同じかと思います。

似たような環境で開発している人の手助けになれば幸いです。

前提条件 📌

環境まわり ⚙️

Target Version
macOS Mojave 10.14.3
Yarn 1.13.0
npm 6.8.0
Node.js 11.10.0
nodebrew 1.0.1

Packages 📦

Package Name Before Version After Version
nuxt 1.4.0 2.4.3
electron 2.0.0-beta.7 4.0.5
node-sass 4.9.3 4.11.0
etc * *

Scripts 🔧

package.json で指定している Script です。

Environment Script Command
dev cross-env NODE_ENV=DEV electron ./main.js yarn run dev
build nuxt generate && cp main.js dist/electron/ && cp nuxt.config.js dist/electron/ && electron-builder -mw yarn run build

バージョンアップ手順 📌

1. Node.js のバージョン変更

※ nodebrew の利用を前提にしています。

Node.js の最新版をインストール

nodebrew install-binary latest

※ latest ≒ v11.10.0(2019/02/21 時点)

インストールした最新版に切り替え

nodebrew use v11.10.0

2. 各 Package を最新バージョンに更新

npm-check-updates のインストール

yarn global add npm-check-updates

インストールしていた Package と lock ファイルの削除

rm -rf node_modules yarn.lock

念の為 Yarn のキャッシュをクリア

yarn cache clean --force

Package の最新バージョン取得
※ package.json が更新されます

ncu -a

事前にどのバージョンに更新されるか確認したい場合

ncu

Package のインストール

yarn install

3. nuxt-sass-resources-loader@nuxtjs/style-resources に乗り換え

nuxt-sass-resources-loader はサポートを終了し、新しく Nuxt.js の公式として @nuxtjs/style-resources が出たので乗り換えました。

nuxt-sass-resources-loader の削除

yarn remove nuxt-sass-resources-loader

@nuxtjs/style-resources のインストール

yarn add @nuxtjs/style-resources

nuxt.config.js の修正 nuxt-sass-resources-loader の記述を削除し、新たに下記を追加

module.exports = { ...prodRouterBase,
  // ・・・

  modules: [
    // 追加
    '@nuxtjs/style-resources',
  ],

  // 追加
  styleResources: {
    sass: [
      // 自分が読み込みたい sass ファイルのパス
      './assets/sass/hoge.sass',
    ]
  },

  // ・・・
}

▼参考 github.com

4. pug-loaderpug-plain-loader に乗り換え

Nuxt.js の 2.x 系から pug-loader から pug-plain-loader に乗り換えたらしいのでこちら側もこれに対応します。
▼参考 ginpen.com

pug-loader の削除

yarn remove pug-loader

pug-plain-loader のインストール

yarn add --dev pug-plain-loader

5. node-sass の build

ここまできて、いざ yarn run dev すると下記のようなエラーが出ます。

Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (69)

ここでめちゃくちゃ苦戦しました…。
そもそもの前提知識が諸々なかったのと、色々とバージョンを上げてしまっていたので何が原因になっているのか分からず迷走しまくりました。

最終的に、下記の答えにたどり着きました(もっと早くたどり着けた気が…)。 github.com

node-sass はインストール時に build のスクリプトを走らせ、その環境に適したプログラムの状態にしますが、 Electron の実行環境には対応していないため、 build した結果が Electron の環境下で動く正しい状態になっていません。

そのため、上記リンク先にあるスクリプトで、自分が扱う Electron の環境(runtime)に合わせて build し直すことで動くようになるんだと思います。
※ もし間違った認識だったらご指摘いただけると助かります🙇🏻‍♂️

ココから実際にやった手順

node-gyp のインストール

npm install -g node-gyp

プロジェクトのディレクトリ直下に、下記の sh ファイルを追加

ファイル名:node_sass_build_for_electron.sh

#!/bin/bash

set -e
ARCH="x64"
TARGET=\$(node -e "console.log(require('./package.json').devDependencies.electron.match(/\d+\.\d+.\d+/)[0])")
PLATFORM=\$(node -e "console.log(process.platform)")

cd node_modules/node-sass/

# Build for Electron for current version
node-gyp rebuild --target=\$TARGET --arch=\$ARCH --dist-url=https://atom.io/download/electron

# Create vendor directory
VENDOR="vendor/\$PLATFORM-\$ARCH-69"
mkdir -p \$VENDOR
cp build/Release/binding.node \$VENDOR

cd ../../

# Clean up
rm -rf build

$ARCH-69 の部分の数字は、エラーメッセージに出ていた runtime (69) に表示されている数字に合わせてください。

追加した sh ファイルを実行

sh node_sass_build_for_electron.sh

6. nuxt.config.js の変更

アプリケーションの構成によって変わる部分ですが、私の場合は build の extend を下記のようにしました。

module.exports = { ...prodRouterBase,
  // ・・・

  build: {
    // ・・・

    extend(config, ctx) {
      config.module.rules.push({
        test: /\.coffee$/,
        use: 'coffee-loader',
        exclude: /(node_modules)/
      })
      config.target = 'electron-renderer'
    },
    // ・・・

  },
  // ・・・

}

config.target は必ず 'electron-renderer' を設定しておきます。
でなければ、 yarn run dev した時に下記のようなエラーが出てしまいます。

Module not found: Error: Can’t resolve ‘fs’ in '/Users/hoge/Projects/app-name/node_modules/electron’

7. sass ファイルの修正

url の指定を下記のように変更

Before After
url("~/assets/img/hoge.png") url("~assets/img/hoge.png")

▼参考 qiita.com

8. 動作確認

ここまできて、やっと開発環境が動きました。

yarn run dev

build もいけます( electron-builder 使ってます )。

yarn run build

さいごに 📌

以上を持って、バージョンアップ作業は終了としました。

node-sass 部分でたいぶ手こずってしまいましたが、ググり力のトレーニングになった気がします。
公式の Issue 読むの大事😠

さいごに、私が開発しているアプリでバージョンアップ対応をした時のプルリクエストを貼っておきます。

github.com