web-dev-qa-db-ja.com

angle2クイックスタートガイドでLite-Serverでデフォルト以外のブラウザを開く

TypeScriptバージョンの Angular 2クイックスタートガイド に従っているので、それが可能かどうか、もしそうなら、デフォルト以外のブラウザを起動するようにlite-serverを設定する方法について疑問に思いました。

Lite-serverはコマンドライン引数を取り、yargs.argvを介して提供されるようです。 yargsは、かなり一般的な標準に基づいてコマンドライン引数を解析しようとするようです（つまり、トークンが--で始まる場合、引数名を表し、そうでない場合は引数値を表します）argv。 lite-serverは、openから取得するargvプロパティを使用しようとします。これは、最終的に[プロセスを起動するノードパッケージの1つ]を介してブラウザを起動します。ノードオープン？ xdg -open？確かではありませんが、（これらのプロセスランチャーのいくつかを見ることに基づく）私の仮定が正しい限り、私にとってはそれほど重要ではありません。省略すると、開くファイルのタイプがhtmlであるため、デフォルトのブラウザーが使用されます。

すべてが正しい場合、または少なくともその要点であれば、たとえば--open chromeを指定するだけでよいようです（chromeがPATH-winマシンでの作業（tww）、package.jsonで定義されているliteコマンドの最後。

のようなもの...

"scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "lite:c": "lite-server --open chrome",
    "lite:f": "lite-server --open firefox ",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},

これが異常に思える場合は謝罪しますが、数日間これをテストできるコンピューターにはいません。答えがあり、調査を停止できるかどうかを知る必要があります:)。ありがとう！

node.jsangularlaunching
19
Eric Lease

最近の変更（@ 2.1.0）では、ブラウザを含む設定をbs-config.json：

{
  "browser": "chrome"
}

または

{
  "browser": ["chrome","firefox"]
}

ブラウザごとに個別のスクリプトを設定する場合は、package.json：

{
  "scripts": {
    "lite": "lite-server",
    "lite:ff": "lite-server --c bs-firefox.json",
    "lite:c": "lite-server --c bs-chrome.json",
    "lite:ie": "lite-server --c bs-ie.json",
    "lite:all": "lite-server --c bs-all.json"
  }
}

複数のファイルに設定をコピーして維持する必要があるため、これは最適なソリューションではありませんが、lite-serverメンテナーが意図していることのようです。参照用の現在の lite-server.js ファイルを次に示します。

23
ender

[〜＃〜] update [〜＃〜]

_lite-server_プロジェクトが更新され、構成可能なブラウザー選択が組み込まれました。これは歴史的な目的のためだけに残し、エンダーの答えをサポートしています。

_lite-server_の作成者 問題に対処するために探していた すべての_browser-sync_オプションを何らかの標準的な方法で構成する（_.rc_ファイルを推奨）。したがって、この質問と回答は、あなたがそれを読む頃には時代遅れかもしれません。

Sasxa、これを指摘してくれてありがとう...

_lite-server_は実際に_browser-sync_を使用しています...

これは、この特定の問題の解決策を考え出す際に重要でした（見過ごされたり、些細なvar sync = require('browser-sync').create(); ... sync.init()として見落としたりしたのは少し恥ずかしいことです）。

ただし、この答えはそのままでは機能しません。これは...

...そのため、_--browser_ CLIコマンド を使用できるはずです。

_"lite:c" : "lite-server --browser chrome --open local"_

...そのままでは機能しません。結局のところ、_lite-server_は、browserが解析に使用されるyargs引数で何もしていません。私はほとんどSasxaの答えを編集していましたが、_browser-sync_ CLIを実際に使用できないという点で、それが多すぎると判断しました。 _lite-server_はすでに_browser-sync_ APIを使用しています。特に、 init() が呼び出されており、そこで browser オプションを指定する必要があります。 browserコマンドライン引数に関して、Angular 2クイックスタートガイドの_package.json_と_browser-sync_の間には完全な切断があります。

修正：

Sasxaの答えに触発されて、browser引数は値chromeで_yargs.argv_に渡されます。

_lite-server.js_は、_browser-sync_に渡すために変更する必要があります。これは、optionsオブジェクトのプロパティとして追加できます...

_var options =
  {
    openPath: openPath,
    files: argv.files ? argv.files : [
      openPath + '/**/*.html',
      openPath + '/**/*.css',
      openPath + '/**/*.js'
    ],
    baseDir: argv.baseDir || './',
    fallback: '/' + openPath + '/index.html',
    browser: argv.browser || "default" // add this line, ~line 24
  };
_

次に、browser-syncのinit()が呼び出されたときに、browserオプションを指定します。

_sync.init({
  port: argv.port || 3000,
  server: {
    baseDir: options.baseDir,
    middleware: [
      log(),
      historyFallback({ index: options.fallback })
    ]
  },
  files: options.files,
  browser: options.browser // add this line, ~line 49
});
_

ここで、Angular 2クイックスタート_package.json_）に戻ると、browser引数に次の引数値を使用できます。

  • chrome
  • firefox
  • iexplore

そのようです...

_"scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",

    "lite": "lite-server",
    "lite:c": "lite-server --browser \"chrome\"",
    "lite:ff": "lite-server --browser \"firefox\"",
    "lite:ie": "lite-server --browser \"iexplore\"",
    "lite:garbage": "lite-server --browser \"garbage\"",

    "start": "concurrent \"npm run tsc:w\" \"npm run lite:c\" ",

    "//": "start default browser:",
    "//": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "//": "start chrome:",
    "//": "concurrent \"npm run tsc:w\" \"npm run lite:c\" ",
    "//": "start firefox:",
    "//": "concurrent \"npm run tsc:w\" \"npm run lite:ff\" ",
    "//": "start ie:",
    "//": "concurrent \"npm run tsc:w\" \"npm run lite:ie\" ",
    "//": "if you want to see an invalid browser arg value, try...",
    "//": "concurrent \"npm run tsc:w\" \"npm run lite:garbage\" "
},
_

いくつかの最終的な考え

実際に起動するには、chromeを取得するためにbrowserの値として_"google chrome"_を使用する必要があります。私は_"chrome"_を使用する必要がありましたが、 docs 「google chrome」と言います...

// Chromeでサイトを開きます

_browser: "google chrome"_

// Chrome＆Firefoxでサイトを開きます

_browser: ["google chrome", "firefox"]_

コマンドラインopen引数は、_lite-server_によってstartPathの一部として使用されており、_browser-sync_。 browserは最終的に_browser-sync_でその名前で使用されているため、起動するブラウザーを指定するために標準的に正しいようです。また、これに関しては、_--open local_は無傷で_browser-sync_になるとSasxaの答えは間違っていました。これは、lite-serverによって消費され、指定されていない場合は_\local\index.html_ではなく_\.\index.html_のようなパスに変換されるため、実際に破損したパスを引き起こします。

3
Eric Lease

MacOSの場合、「bs-config.json」ファイルで大文字と小文字を区別する値を使用する必要がありました。

{
  "browser": "Google Chrome"
}
2
Scott S

プロジェクトフォルダーにファイル名「bs-config.json」を作成し、そのファイルに以下のコードを追加します。

{
"browser": ["chrome","firefox"]         //to make chrome to default browser
}
2
Sanjib Debnath

lite-serverは実際にはbrowser-syncを使用しているため、--browserCLIコマンド を使用できるはずです。

"lite:c" : "lite-server --browser chrome --open local"
2
Sasxa

Debian/Ubuntuとupdate-alternativesの使用

このプロセスをグローバルに変更できることを確認できました ここのコマンド 。現在、lite-serverは browser-sync を使用します opn を使用します xdg-openの独自のコピーをバンドルします 。これを設定するには、

Sudo update-alternatives --config x-www-browser

望ましいと思いました。これはすべてのangle2の例で有効になり、OSの残りの部分でも持続します。シークレットモードでリンクを開くこともできます（上記のリンクの手順）。

0
Evan Carroll

Windows（およびMac）初心者（初心者ではない）：最初の衝動は、プロジェクトディレクトリ内で「bs-config.json」を探すことです。あなたはそれを見つけることができません。ファイルを作成する必要がありますルートプロジェクトディレクトリの下にbs-config.json =。その中で、上記の答えに従って、好みのブラウザを指定します-i.e。、：{"browser"： "chrome"}

その理由は、ファイルlite-server.jsが上記の構成ファイルを探すからです。見つからない場合は、lite-serverのデフォルトを使用して、WindowsシステムのInternet Explorerをデフォルトにします。

0
jpumar