如何通过 npm 脚本将浏览器打开到本地主机

Question

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

Answer 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 command is not supported cross-platform. To overcome this issue check out opener or opn-cli 并相应地替换命令。

但是，这两个包（opener 和 opn-cli）都利用了 Object.assign()，因此在 nodejs[= 的旧版本中不会运行 80=].

编辑： 要在启动服务器后打开浏览器 window，http-server 现在接受 -o option 。这可以用来代替 opener 或 opn-cli 包。

Answer 2

因为 Webpack users: 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 月）

Please note OpenBrowserPlugin is abandoned and a severe vulnerability hasn't been fixed for a while. However rodrigopandini has forked it here. Use npm install rodrigopandini/open-browser-webpack-plugin to use it.

Answer 3

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

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

但是你要注意，在Windows10，你必须在你的node.js服务器开始之前放置start http://localhost:1234。

Answer 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 文档。

Answer 5

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

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

将其与其他命令放在一起：

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

*注意：不要放在node或nodemon命令之后，否则将无法运行。

附加信息：

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

Answer 6

改变

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

至

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

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

Answer 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);
});

Answer 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 打开浏览器

如何通过 npm 脚本将浏览器打开到本地主机

How to open browser to localhost through npm scripts

npm-start

npm-scripts

其他包

npm 脚本

备注

跨平台

更新（2019 年 5 月）