如何通过 npm 脚本打开浏览器到 localhost答案

【问题标题】：How to open browser to localhost through npm scripts如何通过 npm 脚本打开浏览器到 localhost
【发布时间】：2017-04-04 11:15:43
【问题描述】：

我一直在试图弄清楚如何编写一个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 中调用命令有关。提前感谢您的帮助！

【问题讨论】：

也许您可以澄清一下以帮助提高获得答案的机会... 1) 当有人通过他们的 CLI 键入 npm run open 时，您是否打算启动该命令 “如何运行应用程序的说明” 例如：instructions.html，（位于项目文件夹中），在其默认浏览器中：localhost:1234? 2) 或者，如果npm run open 继续在localhost:1234 打开应用程序index.html。如果 1 的答案是肯定的 - 它必须来自 localhost:1234 还是只需在浏览器中打开 instructions.html 就足够了？
@RobC 我的错我确实写得有点含糊。我的目标是编写一个脚本，在用户的浏览器中打开应用程序（我猜操作系统会在用户的默认浏览器上这样做）。因此start 脚本将首先执行build，然后启动运行在localhost:1234 上的服务器，最后启动open 用户浏览器中的应用程序，托管在localhost:1234 上。我的猜测是open 脚本需要是 shell 命令才能执行此操作。

标签： npm-start npm-scripts

【解决方案1】：

这可以通过在您的项目中包含几个额外的包来实现。

附加包

安装http-server:

$ npm install http-server --save-dev

和concurrently:

$ 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 option 。这可以用来代替 opener 或 opn-cli 包。

【讨论】：

非常感谢，这正是我一直在努力做的！写的也很棒。感谢您的帮助。
我不知道这个功能当时是否可用，但现在您只需将-o 选项添加到http-server，它就会为您打开一个浏览器。
无论设置如何，都以 https 生成，将 URL 更改为 http，它每次都会快速回到 https。页面无法加载并始终显示“此站点无法提供安全连接”错误。
@DiggyJohn - 你想访问什么本地主机地址？以及您使用的是哪个浏览器？
@RobC 你是一个活生生的救星，对我没有任何帮助（open, open-cli）你摇滚！

【解决方案2】：

对于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 年 5 月）

请注意，OpenBrowserPlugin 已被废弃，并且有一段时间未修复严重漏洞。然而，罗德里戈潘迪尼在这里分叉了它。使用 npm install rodrigopandini/open-browser-webpack-plugin 来使用它。

【讨论】：

请注意OpenBrowserPlugin 已被废弃，并且有一段时间没有修复严重漏洞。然而rodrigopandini 已经分叉了它here。使用npm install rodrigopandini/open-browser-webpack-plugin即可使用。

【解决方案3】：

你只需要：
start http://localhost:1234（我在Windows 10测试过）。

您需要的脚本是：
"open": "start http://localhost:1234"

但您应该注意，在 Windows 10 中，您必须在 node.js 服务器启动之前放置 start http://localhost:1234。

【讨论】：

Windows 用户的最佳答案，没有 3rd party 库。

【解决方案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 here 在官方 webpack 文档中。

【讨论】：

问题是关于让 NPM 用 dev URL 物理打开浏览器，而不是运行服务器。

【解决方案5】：

打开 URL 的命令（不需要扩展名或库）是：

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

把它和其他命令放在一起：

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

*注意：不要放在node或nodemon命令之后，否则不起作用。

附加信息：

它将在默认浏览器中打开 URL。
首先在浏览器中可能会显示加载失败，因为服务器运行需要一些时间。但是会刷新当服务器启动时自动启动，否则只需手动刷新。

【讨论】：

【解决方案6】：

改变

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

到

"start": "打开 http://localhost:3000 && npm run build && npm run dev",

适用于 macOS。服务器启动后，您可能需要刷新浏览器窗口。

【讨论】：

【解决方案7】：

var express = require('express');
var app = express();

var server = app.listen(process.env.PORT || 5000, function() {
  var port = server.address().port;
  var url = `http://localhost:${port}`;

  var start =
    process.platform == "darwin"
      ? "open"
      : process.platform == "win32"
      ? "start"
      : "xdg-open";
  require("child_process").exec(start + " " + url);
  console.log("App now running on port", port);
});

【讨论】：

【解决方案8】：

只需将http-server 添加到您的项目中使用

npm i http-server --save-exact

然后添加以下脚本：

"scripts": {
    "start": "npm run open",
    "open": "http-server public -a localhost -p 1234 -o"
  },

到你的 package.json 中

“public”是要服务的子文件夹或路径
选项 -a 提供服务器
选项 -p 提供端口
和选项 -o 打开浏览器

【讨论】：