Как открыть браузер на localhost через скрипты npm

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

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

Установите https://www.npmjs.com/package/http-server:

$ npm install http-server --save-dev

и одновременно:

$ npm install concurrently --save-dev

скрипты npm

Добавьте в package.json следующий open скрипт:

"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.

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

Вам просто понадобится ：
start http://localhost:1234 (я тестировал в Windows 10).

Вам понадобятся следующие скрипты:
"open": "start http://localhost:1234"

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

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

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

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

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

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

...

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

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

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

Команда для открытия URL (расширение или библиотека не требуется):

"script_name": "start http://localhost:8080"

Ставим с другими командами:

"script_name": "set Node_ENV=development& start http://localhost:8080& nodemon app.js"

* ПРИМЕЧАНИЕ: не помещайте его после команды node или nodemon, иначе это не сработает.

• Он откроет URL-адрес в браузере по умолчанию.

• Сначала в браузере может отображаться сообщение «Не удалось загрузить», потому что для запуска сервера требуется некоторое время. Но он обновится автоматически, когда сервер запустится, если нет, то просто обновите вручную.

Изменять

начало: npm run build && npm run dev,

to

start: открыть http: // localhost: 3000 && npm run build && npm run dev,

Работает на macOS. Возможно, вам потребуется обновить окно браузера после запуска сервера.

Если вы используете 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.