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

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

并同时:

$ 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您之前定义的任务index.html将a 输出到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选项.这可以代替opener或opn-cli包使用.

Answer 2

您只需要 :

$ start http:// localhost:124

(我在Windows 10中测试过.)

您需要的脚本是:

"打开":"启动http:// localhost:1234 "

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

希望能帮到你.

Answer 3

对于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' })
]