web-dev-qa-db-ja.com

npmスクリプトを介してローカルホストにブラウザを開く方法

私は、ユーザーがブラウザーを手動で開いてnpm scriptに移動することなく、ユーザーのブラウザーで起動されるアプリケーションで最高潮に達するlocalhost:1234を記述する方法を見つけようとしてきました。

現在、私のスクリプトは次のようになっています。

"start": "npm run build && npm run dev",
"build": "npm run clean && npm run mkdir && npm run build:html && npm run build:css && npm run build:js",
"dev": "webpack-dev-server --inline --hot --content-base build --history-api-fallback",

"open": <some code here>,を追加したい

そのため、誰かがGitHubにアクセスしてリポジトリをクローンまたはフォークすると、アプリケーションの実行方法に関する指示が与えられます。これを自動化すると、ちょっとした追加になると思いました。

誰もがこれがどのように可能か知っていますか？私はそれがかなり確かであり、bashでコマンドを呼び出すことに関係があると思います。助けてくれてありがとう！

npm-startnpm-scripts
16
rockchalkwushock

これは、プロジェクトにいくつかの追加パッケージを含めることで実現できます。

追加パッケージ

インストール http-server ：

$ npm install http-server --save-dev

および 同時に ：

$ npm install concurrently --save-dev

npmスクリプト

次のopenスクリプトをpackage.jsonに追加します。

"scripts": {
    "start": "npm run open",
    "open": "concurrently \"http-server -a localhost -p 1234\" \"open http://localhost:1234/build\""
 }

注意

  1. startは実際には次のように定義され、現在のタスクが含まれます。

    "start": "npm run build && npm run dev && npm run open",

  2. 上記のopenスクリプト内のコード：

    open http://localhost:1234/build

    ...前に定義したbuildタスクがindex.htmlをbuildフォルダーに出力すると仮定します。ファイルの名前が異なる場合は、定義する必要があります。例えば。

    open http://localhost:1234/build/the_html_file_name.html

  3. サーバーが起動するまで少し待つだけで、サーバーを起動してからファイルを開くまでに遅延を追加する必要がある場合があります。その場合は、 sleep-ms もインストールします。

    $ npm install sleep-ms --save-dev

    openスクリプトを次のように変更します。

    "open": "concurrently \"http-server -a localhost -p 1234\" \"sleepms 1000 && open http://localhost:1234/build\""

クロスプラットフォーム

残念ながら、クロスプラットフォームでは open コマンドはサポートされていません。この問題を解決するには、 opener または opn-cli を確認し、それに応じてコマンドを置き換えます。

ただし、両方のパッケージ（openerおよびopn-cli）は Object.assign（） を利用するため、nodejs。

Edit：サーバーの起動後にブラウザウィンドウを開くために、http-serverは -oオプション を受け入れます=。これはopenerまたはopn-cliパッケージの代わりに利用できます。

23
RobC

必要なのは：

$ start http：// localhost：1234

（Windows 10でテストしました。）


必要なスクリプトは次のとおりです。

"open"： "start http：// localhost：1234 "


ただし、Windows 10では、node.jsサーバーが開始する前に「start http：// localhost：1234 」を配置する必要があることに注意してください。

あなたを助けることを願っています。

9
Lancer.Yan

Webpack ユーザーの場合： OpenBrowserPlugin もトリックを行います！

Install1つの依存関係：

npm install open-browser-webpack-plugin --save-dev

そして、addこれをwebpack configファイルに：

var OpenBrowserPlugin = require('open-browser-webpack-plugin');

...

plugins: [
  new OpenBrowserPlugin({ url: 'http://localhost:3000' })
]

更新（2019年5月）

OpenBrowserPluginは放棄されており、深刻な脆弱性はしばらく修正されていないことに注意してください。ただし、rodrigopandiniはここで分岐しています。 npm install rodrigopandini/open-browser-webpack-pluginを使用して使用します。

8
Made in Moon

package.jsonで、「start」：「ng serve」を「start」：「ng serve -o」に変更します

0
samivic

Webpackを使用する場合webpack-dev-serverを使用してこれを行う別の方法があります。

  • npm install webpack-dev-server --save-devを使用してインストールします

  • 次に、webpack-dev-serverを実行するか、次のようにnpm scriptを構成します。
    "start": "webpack-dev-server"

  • 次に、http://localhost:8080に移動します

現在のディレクトリのデフォルトファイルごとに提供されます。別のディレクトリからファイルを提供する場合は、次のように--content-baseオプションを使用する必要があります。

webpack-dev-server --content-base thefolderyouwanttoserve/

Webpack-dev-serverの詳細 here 公式webpackドキュメント。

0
billyjov