Как открыть браузер для локального хоста через npm-скрипты

Я пытался выяснить, как написать npm script, который завершится запуском приложения в браузере пользователя, без необходимости вручную открывать браузер и перейти на localhost:1234.

Сейчас мой script читается как:

"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. Заранее спасибо за помощь!

Ответ 1

Это может быть достигнуто включением пары дополнительных пакетов в ваш проект.

Дополнительные пакеты

Установите http-сервер:

$ 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\""
 }

Заметка

start будет определяться следующим образом, чтобы включить задачи, которые у вас есть в данный момент:
```
"start": "npm run build && npm run dev && npm run open",
```
Код в open скрипте выше, который гласит:
```
open http://localhost:1234/build
```
... предполагает, что заданная вами задача build выводит index.html в папку build. Если файл назван по-другому, вам нужно определить его. Например
```
open http://localhost:1234/build/the_html_file_name.html
```
Возможно, вам придется добавить задержку между запуском сервера и открытием файла, просто подождите немного, пока сервер не запустится. Если это так, то также установите 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.

Редактировать: чтобы открыть окно браузера после запуска сервера, http-server теперь принимает -o. Это можно использовать вместо пакетов opener или opn-cli.

Ответ 2

Вам просто нужно ：

$ start http://localhost: 1234

（Я тестировал в Windows 10.）

Сценарии, которые вам нужны:

"open": "start http://localhost: 1234 "

Но вы должны обратить внимание на то, что в Windows 10 вы должны поместить "start http://localhost: 1234 " до запуска вашего сервера node.js.

Надеюсь помочь вам.

Ответ 3

Для пользователей Webpack: OpenBrowserPlugin тоже делает свое дело!

Установите одну зависимость:

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

И добавьте это в конфигурационный файл webpack:

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

...

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

Обновление (май 2019)

Обратите внимание, что OpenBrowserPlugin заброшен, и серьезная уязвимость уже давно не устранена. Однако Родригопандини разбудил его здесь. Используйте npm install rodrigopandini/open-browser-webpack-plugin, чтобы использовать его.

Ответ 4

Если вы используете 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 можно узнать из официального документа по webpack.

Ответ 5

в package.json измените "start": "ng serve" на "start": "ng serve -o"