note Vue.js

direnvはディレクトリごと「環境」切り替えをおこなう - WebStorm

direnvにひとばん苦しめられたのでメモ

なにを勘違いしてたんか、direnvはとある言語のバージョンを切り替えられるモノという先入観があり、正解に近づくまで時間かかっちゃったよ。うえーん。

direnvは、まるっと「環境」を入れ替えられるというシロモノ！nodeだろうがPostgreSQLだろうがGoだろうが何でもいいけど、とにかく、とあるディレクトリ配下の環境をごっそり切り替えることができる。

いま蘇る記憶！

数年前、Women Who Go の 年末勉強会「Humans Who Go Tokyo」にはじめていったとき（リブセンスさんのおしゃれなオフィス！ サロペットの！あたま青い！熊のみっちーさんが！プログラミング言語Goの本を貸してくれた。ももさんとあかねさんもいて、みんなやさしいし、おやついっぱいあった、めっちゃ覚えとる）、そこにきていたGopherおにーさんが direnvについて教えてくれたんだけど、いま！いま！！あぁぁぁーーーこれか！となってる（使う機会なかったので😇

回想おわり。

で、何がしたかったのか。

ことの発端は..

Firebase の functions で 画像のリサイズ処理を作ってる → sharp というプラグインを入れたい → エラーになる。

プロジェクトのルートディレクトリで 

yarn add sharp

するとうまくゆくのですが、functions 配下でやると、

functions@: The engine "node" is incompatible with this module. Expected version "12". Got "15.5.0"

エラーがでる。

Firebseとかvueとかflutterとかで、大変おせわになってるシンギュラリティ・ソサエティのエンジニアさんから

アドバイスもらったの。

functions/src/functions/package.jsonを編集する、12を16に

  "engines": {
    "node": "16"
  },

direnvをインストールして、.zshrc に以下を書く......

export EDITOR=hogehoge
eval "$(direnv hook zsh)"

hogehogeのところに、使用しているエディタを書くのだけど、自分はWebStorm使ってて、なんて書けばええんや...ってなって数時間調べてて時間くった。（どっかのサイトにJetbrainのToolboxでwebstorm用のシェルスクリプトを生成してそれ使えるで！的なことが書いてあったんだけど、生成されなかったよ。公式サイトもみてみたんだけど生成されず。toolboxの再起動もしたのよ？）

で、結局のとのろ、export EDITOR=hogehoge は別に必要なくって

プロジェクトのルートフォルダとかに .envrc を作れば良い。

ここから覚書。

direnvでnodeのバージョン管理

インストール

🌼 % git clone https://github.com/direnv/direnv
🌼 % cd direnv
🌼 % sudo make install

か

🌼 % brew install direnv

 ~./zshrc  にhookを追加する

eval "$(direnv hook zsh)"

プロジェクトのルートディレクトリで 、 touch .envrc  と  direnv allow  する

🌼 % touch .envrc
direnv: error /Users/hogefuga/project/.envrc is blocked. Run `direnv allow` to approve its content        
3:05:25 
🌼 % direnv allow
direnv: loading ~/project/.envrc

 .nvmrc  を作る

16.13.2

.envrc を編集する

nvmrc=~/.nvm/nvm.sh
source $nvmrc
nvm use

16.13.2を入れるのだー

🌼 % nvm install v16.13.2

で、バージョンを確認。

🌼 % node --version
v16.13.2
direnv: error /Users/hogefuga/project/.envrc is blocked. Run `direnv allow` to approve its content        
4:28:04 
🌼 % direnv allow

できた！。なんか  direnv allow  してくれや！ってでたけど。

ちゃんとfunctions以下も v16.13.2 になってる。

あとは肝心の、 yarn add sharp  やで！

🌼 % yarn add sharp     
yarn add v1.22.17
 :
✨  Done in 23.55s.

ふじに入った...。

わかってしまえばなんてことないんだけど、勉強になりました。

まとめと追記:
  • nodeの実行バージョンをディレクトリごと一括に変更するには、direnv。
  • yarn add sharpがいれられなかったのは、package.jsonのnodeの指定が12になっていたため、実行環境のnodeバージョンにpackage.jsonに記載したバージョンをあわせる必要があった。
  • typescript使っているので、yarn add sharp ではだめ（これはこちらの記事で）

気づけば4時52分..続きはまた次女と長男送り出したらやろう。

このままだと昼まで寝てしまいそうなので（次女の弁当作りがある...仕事もある）、朝５時間らのFlutter勉強会に申し込みました。ちょっといってきます。

-note, Vue.js