Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nuxt.js, Electron, etc... のパッケージをアップデート🥳 #47

Merged
merged 2 commits into from Feb 21, 2019

Conversation

Projects
None yet
1 participant
@uucyan
Copy link
Owner

uucyan commented Feb 18, 2019

超苦戦した🤧😷🤒🤕💀

Node.js 📌

Before Version After Version
8.11.4 11.10.0

Packages 📌

Package Name Before Version After Version
Nuxt.js 1.4.0 2.4.3
Electron 2.0.0-beta.7 4.0.5
etc * *

How to update 📌

1. 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 の最新バージョン取得

ncu -a

Package のインストール

yarn install

nuxt-sass-resources-loader は終了してしまい、新しく @nuxtjs/style-resources が出たので乗り換えた。

nuxt-sass-resources-loader の削除

yarn remove nuxt-sass-resources-loader

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

yarn add @nuxtjs/style-resources

※ nuxt.config.js も修正。
参考:https://github.com/nuxt-community/style-resources-module

Nuxt.js の 2.x系から pug-loaderpug-plain-loader に変わったらしいのでこれも乗り換える。
参考:https://ginpen.com/2018/10/01/nuxt-2-pug/

pug-loader の削除

yarn remove pug-loader

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

yarn add --dev pug-plain-loader

3. node-sass の build

yarn install が終わった後にそのまま yarn run dev すると下記のようなエラーが出る。

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

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

最終的に、下記の答えにたどり着いた(もっと早くたどり着けた気が…)。
https://github.com/sass/node-sass/issues/2054#issuecomment-326525115

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


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

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

sh node_sass_build_for_electron.sh

4. nuxt.config.js の変更

新しい書き方とかに合わせた。
https://github.com/uucyan/lgtm-cabinet/pull/47/files#diff-7d1641065fb3365f32d1446a034d5609

5. sass ファイルの修正

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

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

参考:https://qiita.com/dojineko/items/ae7393dc83fb1f5fb0a4

6. yarn run dev!!!!!

開発環境立ち上げ。

yarn run dev

build もいける。

yarn run build

@uucyan uucyan force-pushed the feature/update_packages branch 2 times, most recently from f1822f4 to 5fb490b Feb 18, 2019

@uucyan uucyan changed the title [WIP]Nuxt.js のアップデート [WIP]Nuxt.js とその他パッケージのアップデート Feb 18, 2019

@uucyan uucyan force-pushed the feature/update_packages branch from 5fb490b to 7e2e169 Feb 21, 2019

@uucyan uucyan changed the title [WIP]Nuxt.js とその他パッケージのアップデート Nuxt.js とその他パッケージのアップデート🥳 Feb 21, 2019

@uucyan uucyan changed the title Nuxt.js とその他パッケージのアップデート🥳 Nuxt.js, Electron, etc... のパッケージをアップデート🥳 Feb 21, 2019

@uucyan uucyan merged commit d90255c into master Feb 21, 2019

1 check passed

ci/circleci: build Your tests passed on CircleCI!
Details

@uucyan uucyan deleted the feature/update_packages branch Feb 21, 2019

@uucyan uucyan restored the feature/update_packages branch Feb 21, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.