linuxBean14.04(117)NetBeans8.1でnvmのNode.jsを使うための工夫

ラベル: , ,
NetBeans8.1からNode.jsに標準対応とのことでインストールしましたが、nvmとの併用にひと工夫が必要でした。

前の関連記事:linuxBean14.04(116)BashEclipseでシェルスクリプトのデバッグ


NetBeans8.1のHTML5/JavaScript版をインストール


LibreOffice5(15)Javaの例をデバッグ情報を追加してビルドするでNetBeans8.1をインストールしようとした時はJava SE版をダウンロードしてインストールしようとしましたがOpenJDKとの連携の仕方がわからず断念しました。

今回はNetBeans IDE ダウンロードからJREが含まれているHTML5/JavaScript版のx86をダウンロードしました。

sh netbeans-8.1-html-linux-x86.sh

Terminalからこのコマンドでインストールが始まります。

インストール先はデフォルトのまま~/netbeans-8.1にしました。

インストールが完了したら豆ボタン→プログラミング→NetBenas IDE 8.1で起動できます。


Yesをクリックして8.0.2の設定をインポートしました。

linuxBean14.04(25)NetBeans8とLibreOffice5のインストールで設定されたオプションがインポートされて反映されていました。
netbeans_jdkhome="/home/pq/netbeans-8.1/bin/jre"
~/netbeans-8.1/etc/netbeans.confを確認すると使用するJREはバンドルされたものになっておりシステムで使用するOpenJDKには影響していませんでした。
pq@HP6730b1:~/ダウンロード$ /home/pq/netbeans-8.1/bin/jre/bin/java -version
java version "1.8.0_60"
Java(TM) SE Runtime Environment (build 1.8.0_60-b27)
Java HotSpot(TM) Server VM (build 25.60-b23, mixed mode)
バンドルJREのバージョンは1.8でした。

これに使用するフォントファイルは~/netbeans-8.1/bin/jre/lib/fontsにありますが、いまのところ日本語フォントの文字化けには出会っていないのでlinuxBean14.04(25)NetBeans8とLibreOffice5のインストールでやったようなTakaoフォントへのシンボリックリンクは作成しませんでした。

NetBeans8.1のオプションのHTML5/JSに必要なパッケージのインストール


JREと違ってNode.jsはバンドルされていないので、自分でインストールしたNode.jsの場所をNetBeansに教えてあげないといけません。

Node.jsはlinuxBean14.04(9)node.jsとBracketsのインストールのnvmでインストールしたものを使うことにします。

まずはnvmでstableバージョンをインストールしました。
pq@pq-VirtualBox:~$ nvm install stable
Downloading https://nodejs.org/dist/v6.2.0/node-v6.2.0-linux-x86.tar.xz...
######################################################################## 100.0%
Now using node v6.2.0 (npm v3.8.9)
Node.jsのバージョンの更新は頻繁です。

今回はv6.2.0がインストールされました。

linuxBean14.04(111)SyntaxHighlighter3.0.9をビルドする:成功編のときみたいにNode.jsのバージョンを切り替えたいときもあるのでnvmを使っていますが、nvmと同様にNetBeansでNode.jsのバージョンを切り替えるためには工夫が必要です。

まずは工夫せずにやってみます。

NetBeans8.1でツール→オプション。

HTML/JSをボタンをクリック。

Node.jsタブをクリック。

Nodeのパスは~/.nvm/versions/node/v6.2.0/bin/nodeになりますので参照ボタンをクリックしてこれを指定します。


適切に機能するには、NetBeansnihaNode.jsソースが必要です、と言われます。

コード補完にソースを使うようです。

ダウンロードボタンをクリックするとダウンロードが始まります。


nodeはv6.2.0を指定したのになぜかv0.12.9が落ちてきます。

Bug 256375 – Netbeans download wrong node.js sources

v4以降のNode.jsはECMAScript6で書かれているためにNetBeansはまだソースを理解できないそうです。

なので代わりにv0.12.9のソースを参照しているのでした。

ダウンロードが完了するとDownloaded ( version 6.2.0 -> 0.12.9) と表示されました。

ダウンロードされたソースはどこにあるのか探しだせませんでした。


npmはnodeと同じバージョンのものを指定しました。

npmを指定したあとでも「~のインストール」という文字をクリックしてもインストールしてくれるわけではなくそのパッケージのホームページが開くだけでした。

npmを指定したあとは自動でなんとかしてほしいものですが仕方ないのでグローバルインストールします。

ちなみにローカルインストールすればlinuxBean14.04(110)Node.jsのnpm使い方メモのようにnvmで切り替えたNode.jsのバージョンに関係なく同一のパッケージが使えるはずですが、各パッケージが依存するパッケージは共有されないのでnode-sassが6個も重複インストールされてしまいました。(linuxBean14.04(119)NetBeans8.1でNode.jsの設定:もう一つの方法参照。)

npm install express-generator -g
npm install bower -g
npm install node-sass -g
npm install less -g
npm install grunt-cli -g
npm install gulp-cli -g
npm install karma -g

グローバルインストールのログ

SassについてはNetBeansから飛んだページにはRuby版のインストール方法しか載っていなかったのでnode-sassに変更しました。

モバイル・プラットフォームタブのものはインストールしていません。

インストールしたパッケージはすべて~/.nvm/versions/node/v6.2.0/binフォルダにシンボリックリンクがあるのでそれぞれ指定しました。

とりあえずこの方法でNew Features in NetBeans Connector Plugin for Chrome - YouTubeのチュートリアルをやってみるとBowerインストールができません。
"/home/pq/.nvm/versions/node/v6.2.0/bin/bower" "install"
/usr/bin/env: node: そのようなファイルやディレクトリはありません
完了。
NetBeansの出力にこのように言われてしまいます。

envというのは、フルパスでしか指定できないshebangに汎用性を持たせるために引数のコマンドをシェルで使った時と同様にPATHの中に見つけて実行してくれるコマンドになります。
pq@HP6730b1:~$ echo $PATH
/home/pq/.nvm/versions/node/v6.2.0/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games
pq@HP6730b1:~$ /usr/bin/env node --version
v6.2.0
Terminalで確認するとPATHにはnvmのパスが設定されているのですが、これは~/.bashrcに設定されたnvmの設定をTerminal起動時に読みこんでいるからできていることです。(linuxBean14.04(21)Bloggerで使うJavaScriptの開発環境参照。)

shebangで実行した場合はコマンド実行前に~/.bashrcを読み込んでいないためにnvmのPATHが設定されていないのでnodeコマンドがないということになります。

ちなみに~/netbeans-8.1/bin/netbeansの最後にnvmの設定を追加してみましたがうまくいきませんでした。

ということでlinuxBean14.04(115)pythonコマンドをpipコマンドとともに切り替えるのときと同様にupdate-alternativesで必要なパッケージのシンボリックをデフォルトのPATHに作ってしまうことにします。

update-alternativesでnpmパッケージのシンボリックリンクを作成する


Node.jsのバージョンの切替も簡単にしたいのでまずはNode.jsのbinディレクトリへのシンボリックリンクをupdate-alternativesで作成します。
sudo update-alternatives --install ~/.nvm/node_bin node_bin  ~/.nvm/versions/node/v6.2.0/bin 60200 
これでまずは~/.nvmディレクトリに~/.nvm/versions/node/v6.2.0/binディレクトリへのシンボリックリンクnode_binが作成できました。

優先度は最新バージョンが優先されるようにバージョン番号に合わせておきました。

npm install express-generator -g
npm install bower -g
npm install node-sass -g
npm install less -g
npm install grunt-cli -g
npm install gulp-cli -g
npm install karma -g

今度はこれらでインストールしたパッケージのコマンドのシンボリックリンクをupdate-alternativesで/usr/local/binに作成します。
sudo update-alternatives --install /usr/local/bin/node node  ~/.nvm/node_bin/node 10 --slave /usr/local/bin/npm npm ~/.nvm/node_bin/npm --slave /usr/local/bin/express express ~/.nvm/node_bin/express --slave /usr/local/bin/bower bower ~/.nvm/node_bin/bower --slave /usr/local/bin/node-sass node-sass ~/.nvm/node_bin/node-sass --slave /usr/local/bin/lessc lessc ~/.nvm/node_bin/lessc --slave /usr/local/bin/grunt grunt ~/.nvm/node_bin/grunt --slave /usr/local/bin/gulp gulp ~/.nvm/node_bin/gulp --slave /usr/local/bin/karma karma ~/.nvm/node_bin/karma
これでnpmも含めてPATHが通っている/usr/local/binにnode、npm、express、bower、node-sass、lessc、grunt、gulp、karmaの9個のシンボリックリンクが作成できました。

cordovaも使うときはnpm install cordova -gでグローバルインストールしたあと次のコマンドでupdate-alternativesを更新します。
sudo update-alternatives --install /usr/local/bin/node node  ~/.nvm/node_bin/node 10 --slave /usr/local/bin/npm npm ~/.nvm/node_bin/npm --slave /usr/local/bin/express express ~/.nvm/node_bin/express --slave /usr/local/bin/bower bower ~/.nvm/node_bin/bower --slave /usr/local/bin/node-sass node-sass ~/.nvm/node_bin/node-sass --slave /usr/local/bin/lessc lessc ~/.nvm/node_bin/lessc --slave /usr/local/bin/grunt grunt ~/.nvm/node_bin/grunt --slave /usr/local/bin/gulp gulp ~/.nvm/node_bin/gulp --slave /usr/local/bin/karma karma ~/.nvm/node_bin/karma --slave /usr/local/bin/cordova cordova ~/.nvm/node_bin/cordova
削除するときはsudo update-alternatives --remove-all nodeで一気にできます。

これらのNode.jsのバージョンは先に作成したシンボリックnode_binのリンク先に依存します。

なのでnode_binを切り替えるだけでこのnpmグループが使うNode.jsのバージョンも切り替えることができます。

試しにNode.jsのv5と切り替えれるようにしてみます。
pq@HP6730b1:~/.nvm$ nvm install v5
Downloading https://nodejs.org/dist/v5.11.1/node-v5.11.1-linux-x86.tar.xz...
######################################################################## 100.0%
Now using node v5.11.1 (npm v3.8.6)
node v5.11.1をnvmでインストールしました。

続いてNetBeansが使う先ほどの7つのnpmパッケージをインストールしました。
sudo update-alternatives --install ~/.nvm/node_bin node_bin  ~/.nvm/versions/node/v5.11.1/bin 51101 
update-alternativesでnode v5.11.1のbinディレクトリへのシンボリックリンクを作成します。

これでnvmを使わずにupdate-alternativesでnode、npm、npm、bower、node-sass、lessc、grunt、gulp、karmaの9個のコマンドを切り替えられるはずです。

これはあくまでNetBeans8.1で使うNode.jsのバージョンを切り替えられるだけであって、Terminalのnvmのバージョンには影響しないことに注意しないといけません。

確認のために.bashrcから次の2行をコメントアウトしてTerminalを起動します。
# export NVM_DIR="/home/pq/.nvm"
# [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm

まずecho $PATHでnvmのパスがないことを確認しています。

そのあと現在のnodeコマンドのバージョンを確認後sudo update-alternatives --config node_binでnodeのbinディレクトリへのリンクを切り替えます。
pq@HP6730b1:~$ echo $PATH
/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games
pq@HP6730b1:~$ node --version
v6.2.0
pq@HP6730b1:~$ sudo update-alternatives --config node_bin
alternative node_bin (/home/pq/.nvm/node_bin を提供) には 2 個の選択肢があります。

  選択肢    パス                                   優先度  状態
------------------------------------------------------------
* 0            /home/pq/.nvm/versions/node/v6.2.0/bin    60200     自動モード
  1            /home/pq/.nvm/versions/node/v5.11.1/bin   51101     手動モード
  2            /home/pq/.nvm/versions/node/v6.2.0/bin    60200     手動モード

現在の選択 [*] を保持するには Enter、さもなければ選択肢の番号のキーを押してください: 1
update-alternatives: /home/pq/.nvm/node_bin (node_bin) を提供するために 手動モード で /home/pq/.nvm/versions/node/v5.11.1/bin を使います
pq@HP6730b1:~$ node --version
v5.11.1
これでこのv5.11.1にパッケージをグローバルインストールしてあればnode、npm、express、bower、node-sass、lessc、grunt、gulp、karmaの9個のコマンドだけupdate-alternativesでNode.jsのバージョンを切り替えることができるようになります。

sudo update-alternatives --config node_binでまたv6.2.0に戻しておきました。

NetBeans8.1のHTML/JSのオプションを設定する


すべてupdate-alternativesで作成したシンボリックリンクで指定します。

NetBeans8.1からツール→オプション。

HTML/JSボタンをクリック。


Node.js以外のすべてのタブでも/usr/local/binに作成したシンボリックリンクのパスを入力し直しました。

これで設定完了です。

Node.jsのバージョンを切り替えるときはsudo update-alternatives --config node_binだけでできますが、ソースのダウンロードはNetBeansからの操作が必要になると思います。

(2017.4.16追記。このオプションで設定しても、npmスクリプトのコマンドはTerminalのデフォルトのバージョンのnode.jsが使われていました。npmスクリプトで使うnode.jsのバージョンを変えるにはnvmのdefaultのエイリアスを変更する必要がありました。linuxBean14.04(161)brush-Makefileのバグを修正する参照。)

モバイル・プラットフォームタブの設定



Android SDKの場所、ANDROID_HOMEの設定、cordovaのインストール、を指摘されています。

cordovaのインストールについてはすでにやったようにnpm install cordova -gしてupdate-alternativesで/usr/local/binにシンボリックリンクを作成して解決しています。

Android SDKについてはlinuxBean14.04(118)Android Studioのインストールでインストールされたものを使います。

Android SDKの場所は~/Android/Sdkです。

ということで/home/pq/Android/Sdkと入力すればよいです。

問題はANDROID_HOMEの設定です。

Bug 248206 – Cannot run Cordova 3.6.3+

これを読んでようやくわかりました。

~/.bashrcはNetBeansに読まれませんが、ログインシェルが読み込む~/.profileは読み込むのでした。

export ANDROID_HOME=/home/pq/Android/Sdk

ということで~/.profileにこの行を追加しました。

ログインシェルの設定なので再起動すると解決しました。


参考にしたサイト


NetBeans IDE 8.1リリース情報
NetBeans8.1でNode.jsなどのJavaScript関係への対応が強化されました。

Bug 256375 – Netbeans download wrong node.js sources
ECMAScript6で書かれているNode.js v4以降のソースはNetBeans8.1は解析できないため代わりに0.12.9が使われます。

env - Wikipedia
/usr/bin/envを使うとshebangでPATHのコマンドを実行できます。

Bug 248206 – Cannot run Cordova 3.6.3+
~./bashrcの設定はNetBeansには反映されませんが~/.profileに書いて再起動すると反映されました。

次の関連記事:linuxBean14.04(118)Android Studioのインストール

PR

0 件のコメント:

コメントを投稿