Question

我一直在试图弄清楚如何编写一个npm script，最终会在用户的浏览器中启动应用程序，而无需手动打开浏览器并转到localhost:1234。< / p>

现在我的脚本读作：

"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文件夹。如果文件的名称不同，则需要对其进行定义。 E.g。
```
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包。

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

Answer 3

你只需要：

$ start http://localhost:1234

（我在Windows 10中测试过。）

您需要的脚本是：

＆＃34;开＆＃34; ：＆＃34;开始http://localhost:1234＆＃34;

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

希望能帮到你。

Answer 4

在package.json中，将“ start”：“ ng serve”更改为“ start”：“ ng serve -o”

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": "打开 http://localhost:3000 && npm run build && npm run dev",

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

Answer 7

如果您使用 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官方文档中有关webpack-dev-server here的更多信息。

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

7 个答案:

其他套餐

npm脚本

注意

跨平台

更新（2019年5月）