35

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

4

8 回答 8

47

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

附加包

安装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您之前定义的任务将 a 输出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选项. 这可以用来代替openeroropn-cli包。

于 2016-12-21T16:37:50.967 回答
22

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

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

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

于 2018-03-28T05:35:25.177 回答
8

对于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 来使用它。

于 2017-08-14T12:32:21.663 回答
1

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

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

将其与其他命令一起使用：

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

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

附加信息：

  • 它将在默认浏览器中打开 URL。

  • 首先在浏览器中可能会显示加载失败，因为服务器运行需要一些时间。但是当服务器启动时它会自动刷新，如果不是然后手动刷新。

于 2021-01-26T11:12:32.330 回答
1

改变

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

到

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

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

于 2021-03-22T13:48:00.370 回答
1 
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);
});
于 2021-09-17T05:16:03.063 回答
1

只需使用 http-server 将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 打开浏览器
于 2021-09-21T11:40:15.233 回答
0

如果您使用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 文档。

于 2018-10-04T13:24:52.590 回答