从npm脚本中在浏览器中打开html文件

Question

我能找到的解决方案都需要安装一个npm包来启动一个http服务器以托管文件。我的唯一要求是通过npm脚本在浏览器中打开一个非常简单的本地生成的html文件，不需要服务器，这可行吗？没有包可以实现吗？

- b.stevens.photo

---

这回答解决了您的问题吗？如何使用Node.js打开默认浏览器并导航到特定URL 尤其是第二个答案-它的建议解决方案没有任何依赖包。 - cbr

关于我之前的评论，如果您正在脚本中生成HTML，则首先需要将内容写入文件。fs.mkdtemp可能对您有用。 - cbr

我正在尝试通过脚本而不是JavaScript来实现这一点，我发现我可以创建一个包含内容“start chrome "$(realpath "./jest/report.html")"”的bash脚本，然后从node运行该脚本。 - b.stevens.photo

在 macOS 上，npm-scripts 使用的默认 shell 是 sh。因此，您可以在 npm 脚本中使用内置的 open 实用程序。例如，您可以在 package.json 的 scripts 部分中定义以下 npm-script："quux": "open -a \"Safari\" ./path/to/index.html" - 然后运行 npm run quux - 注意：您可以将上述 npm 脚本中的 "Safari" 部分更改为其他首选浏览器，例如 Google Chrome 等。还要确保根据需要重新定义 /path/to/index.html 部分。对于跨平台解决方案，您需要使用 node.js。 - RobC

Answer 1

我试过了Daniel的答案，但对我无效。

根据他的答案，我找到了open-cli包。

npm i -D open-cli

然后在 package.json 的 script 对象中像这样使用它(open-cli)

{
  "name": "somename",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "open-my-html": "open-cli path/to/your/index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies: {
    "open-cli": "^6.0.1"
  },
  "author": "",
  "license": "ISC"
}

然后运行

npm run open-my-html

现在它可以在默认浏览器中打开HTML文件。

- Allan Andrade

Answer 2

我发现可以创建一个包含内容的bash脚本

#!/bin/bash
start chrome "$(realpath "./jest/report.html")"

然后使用

运行该程序

，保留HTML，不进行解释。

"test": "jest && bash ./open-browser.sh"

- b.stevens.photo

---

考虑把Bash代码嵌入到npm脚本中，以避免使用单独的文件。 例如："test": "jest && bash -c \"start chrome \"$(realpath ./jest/report.html)\"\""。 - RobC

不是跨浏览器的解决方案 - Amin

问题并没有要求提供跨浏览器的解决方案，只是要求如何在不使用包的情况下完成它。 - b.stevens.photo

Answer 3

假设您的Node脚本和index.html文件在同一个文件夹中。

const open = require('open');

(async () => {
        await open('index.html', {"wait": true });
})();

看看这个包: https://www.npmjs.com/package/open

- abhnv

Answer 4

 {   "start": "start http://localhost:8000 & npm run dev", }

只需使用上述脚本，它对我有效。首先它会在浏览器中打开 URL，然后启动服务器。问题是首次访问 URL 会报错，然后运行服务器后页面将自动重新加载。

如果您不需要使用任何外部软件包，那么这更好。

- Shawinder Jit Singh

Answer 5

最简单的方法是安装open软件包

npm i open --save-dev

然后在 package.json 的 script 对象中像这样使用它

{
  "name": "somename",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "open-my-html": "open path/to/your/index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies: {
    "open": "^7.3.0"
  },
  "author": "",
  "license": "ISC"
}

然后运行

npm run open-my-html

- Daniel

---

在问题中，它询问是否有一种无需软件包即可完成此操作的方法。 - b.stevens.photo