結論
build\dev-server.jsのopnの呼び出しで第2引数に呼び出したいブラウザを渡す。
opn(uri, {app: 'chrome' })
ChromeはWindows系とMac系とLinux系でそれぞれ名前が異なるみたいなので注意。
当環境はWindowsです。本文では、ChromeとChorme Canaryの呼び分けの話とかを書きます。
本文
背景
最近、Chrome Canaryを使い始めました。Chrome Canary(以下、Canary)はChromeの開発版であり、まだ一般公開用のChrome(以下、Chrome)に入っていない機能などを使うことができます。
Chromeと別に入れることができるので、私はChromeはブラジング、Canaryは開発用に使っています。
なので、デフォルトブラウザはChromeにしているんですが、それだとnpm run devコマンドなどで開くときにChromeで開かれてしまいます。
そこで、Canaryで開くように設定を変えます。
環境はWindows 10、webpackテンプレートで作ったVueプロジェクト(vue init webpack)を想定しています。
本文
package.json
npm runで実行されるコマンドはpackage.jsonのscriptプロパティに記述されるので、そこを見てみると以下のようになっています。
"dev": "node build/dev-server.js",
どうやら、build/dev-server.jsというファイルを実行しているだけっぽい。
build/dev-server.js
中身を見ていくと、なんとなく怪しいのがopn(uri)です。
おそらく渡したuriでブラウザを開く処理ではないかと推測できます。
そこで、opnについて調べていきます。
js上部でrequireで持ってきているので外部のライブラリということもわかるので、npmのopnの情報から、opnのGitHubのリポジトリを見に行きます。
opn
opnのサイトを見てみると第2引数のオブジェクトのappプロパティで指定したブラウザで開くようです。
Chromeの場合、Windowsはchrome、Macはgoogle chrome、Linuxはgoogle-chromeと全部異なるようです。
とりあえず、Chromeで起動する設定にしてみます。
opn(uri, {app: 'chrome' })
これに変更した後にnpm run devするとCanaryが開きました。
あれれ～？
opnの動作
opnのコードを追ってみると、プログラムを起動させるためのコマンドを呼び出しているだけのようです。
Windowsであれば、start chromeコマンドで呼び出されるブラウザがopn(uri, {app: 'chrome' })によって呼び出されます。
そこで、start chromeを実行してみると確かにCanaryが開きます。
おそらく、Canaryを後からインストールしたせいでしょうか。
一応、Canaryを削除して試してみたら今度はChromeが起動しました。chromeという名前でChromeとCanaryが衝突を起こしるようですね。
呼び分ける
Canaryが呼び出せたので一応目的を達成したのですが、衝突しているのがイヤなので呼び分けを考えてみます。
startコマンドから呼び出す方法を調べてみると、名前を変えたショートカットを置いたフォルダを作り、環境変数Pathにそのフォルダのパスを指定するとよい良いようなので、ChromeとCanaryのショートカットをそれぞれchromeo、chromecという名前で作成しました。
これによって、ChromeとCanaryの呼び分けができるようになりました。
Chrome
opn(uri, {app: 'chromeo' })
Canary
opn(uri, {app: 'chromec' })
余談
パスを変えたとき、普通に起動したWindows Power Shellなら即時反映されたんだけど、atom-terminalで起動したWindows Power Shellではパスが再起動するまで有効にならなかった…。