【问题标题】:Opening non-default browser with lite-server in angular2 quick start guide在 angular2 快速入门指南中使用 lite-server 打开非默认浏览器
【发布时间】:2016-04-21 20:19:35
【问题描述】:

遵循 Angular 2 Quick Start guide 的 TypeScript 版本后,我想知道是否可以,如果可以,如何配置 lite-server 以启动默认浏览器以外的浏览器。

似乎 lite-server 将采用命令行参数,通过yargs.argv 提供给它。似乎yargs 将尝试根据相当普遍的标准解析命令行参数(即,如果标记以-- 开头,则它表示参数名称,否则表示参数值)以获得argv。 lite-server 将尝试使用从argv 获得的open 属性,这最终是通过[启动进程的节点包之一] 启动浏览器的。节点开放? xdg-打开?不确定,只要我的假设(基于查看其中几个进程启动器)是正确的,现在对我来说并不那么重要,它们都可以选择使用定义要启动的进程的参数。如果省略,将使用默认浏览器,因为要打开的文件类型是 html,这就是发生的情况。

如果所有这些都是正确的,或者至少是它的要点,那么我似乎只需要指定 --open chrome,例如(假设 chrome 在我的 PATH 中 - 顺便说一下在 win 机器上工作),在在package.json 中定义的lite 命令的结尾。

比如……

"scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "lite:c": "lite-server --open chrome",
    "lite:f": "lite-server --open firefox ",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},

如果这看起来很愚蠢,我深表歉意,但我不会在电脑前测试几天,我需要知道我是否有答案并且可以停止研究这个:)。谢谢!

【问题讨论】:

标签: node.js angular launching


【解决方案1】:

使用 Debian/Ubuntu 和 update-alternatives

我确认您可以通过此command here 全局更改此流程。目前lite-server 使用browser-sync,后者使用opn,其中bundles its own copy of a xdg-open。你可以配置这个,

sudo update-alternatives --config x-www-browser

我发现它更可取。它对所有 angular2 示例都有效,并且也适用于操作系统的其余部分。您还可以使链接以隐身方式打开(上面链接中的说明)。

【讨论】:

    【解决方案2】:

    对于 MacOS,我必须在“bs-config.json”文件中使用区分大小写的值:

    {
      "browser": "Google Chrome"
    }
    

    【讨论】:

    • 这对我有用。使用 MacOS,我首先在 bs-config.json 中添加了“browser”:“chrome”,但没有成功。 (我收到以下错误消息:[Browsersync]Couldn't open browser(如果您在无头环境中使用 BrowserSync,您可能需要将 open 选项设置为 false))
    【解决方案3】:

    在您的项目文件夹中创建一个文件名“bs-config.json”并将以下代码添加到该文件:

    {
    "browser": ["chrome","firefox"]         //to make chrome to default browser
    }
    

    【讨论】:

      【解决方案4】:

      对于 Windows(和 Mac)新手(而不是新手 :): 您的第一个冲动可能是在您的项目目录中查找“bs-config.json”。你不会找到它。您需要在项目根目录下创建一个文件,并将其命名为bs-config.json。根据上面的答案,您可以在其中指定您喜欢的浏览器 - 即:{“browser”:“chrome” }

      原因是文件 lite-server.js 寻找上述配置文件;如果没有找到它,它会使用 lite-server 默认值,在 Windows 系统上默认 Internet Explorer。

      【讨论】:

        【解决方案5】:

        更新

        lite-server 项目已更新以包含可配置的浏览器选择。我只是出于历史目的而留下这个,并支持安德的回答。


        lite-serverhas been looking to address the issue 的创建者以某种标准方式配置所有browser-sync 选项(建议使用.rc 文件)。因此,当您阅读它时,这个问题和答案可能已经过时了。


        感谢 Sasxa 指出这一点...

        lite-server 实际上是在使用browser-sync ...

        这对于为这个特定问题提出解决方案至关重要(这有点令人尴尬,我忽略了或将其视为微不足道的var sync = require('browser-sync').create(); ...sync.init())。

        但是,该答案不会按原样起作用,因为...

        ...所以你应该可以使用--browserCLI command

        "lite:c" : "lite-server --browser chrome --open local"

        ...不能开箱即用。事实证明,lite-server 没有对 browser 用于解析出的 browser 参数做任何事情。我几乎编辑了 Sasxa 的答案,但认为它分歧太大,因为你真的不能使用 browser-sync CLI。 lite-server 已经在使用 browser-sync API。特别是,正在调用init(),并且需要在此处指定browser 选项。关于 browser 命令行参数,Angular 2 快速入门指南的 package.jsonbrowser-sync 之间存在完全脱节。


        修复:

        受 Sasxa 回答的启发,browser 参数将被传递给 yargs.argv,值为 chrome

        必须修改lite-server.js 以将其传递给browser-sync。这可以作为options 对象的属性添加...

        var options =
          {
            openPath: openPath,
            files: argv.files ? argv.files : [
              openPath + '/**/*.html',
              openPath + '/**/*.css',
              openPath + '/**/*.js'
            ],
            baseDir: argv.baseDir || './',
            fallback: '/' + openPath + '/index.html',
            browser: argv.browser || "default" // add this line, ~line 24
          };
        

        然后,当调用 browser-sync 的 init() 时,指定 browser 选项。

        sync.init({
          port: argv.port || 3000,
          server: {
            baseDir: options.baseDir,
            middleware: [
              log(),
              historyFallback({ index: options.fallback })
            ]
          },
          files: options.files,
          browser: options.browser // add this line, ~line 49
        });
        

        现在,回到 Angular 2 快速入门 package.json,以下参数值可用于 browser 参数:

        • chrome
        • firefox
        • iexplore

        像这样……

        "scripts": {
            "tsc": "tsc",
            "tsc:w": "tsc -w",
        
            "lite": "lite-server",
            "lite:c": "lite-server --browser \"chrome\"",
            "lite:ff": "lite-server --browser \"firefox\"",
            "lite:ie": "lite-server --browser \"iexplore\"",
            "lite:garbage": "lite-server --browser \"garbage\"",
        
            "start": "concurrent \"npm run tsc:w\" \"npm run lite:c\" ",
        
            "//": "start default browser:",
            "//": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
            "//": "start chrome:",
            "//": "concurrent \"npm run tsc:w\" \"npm run lite:c\" ",
            "//": "start firefox:",
            "//": "concurrent \"npm run tsc:w\" \"npm run lite:ff\" ",
            "//": "start ie:",
            "//": "concurrent \"npm run tsc:w\" \"npm run lite:ie\" ",
            "//": "if you want to see an invalid browser arg value, try...",
            "//": "concurrent \"npm run tsc:w\" \"npm run lite:garbage\" "
        },
        

        一些最后的想法

        您可能需要使用"google chrome" 作为browser 值才能让chrome 真正启动。我需要使用"chrome",而docs 说“google chrome”...

        // 在 Chrome 中打开网站

        browser: "google chrome"

        // 在 Chrome 和 Firefox 中打开网站

        browser: ["google chrome", "firefox"]

        命令行 open 参数lite-server 使用,作为传递给browser-syncstartPath 的一部分。 browser 似乎对于指定要启动的所需浏览器是正确的,因为它最终被 browser-sync 中的该名称使用。此外,关于这一点,Sasxa 的回答是不正确的,因为假设 --open local 会安然无恙地到达 browser-sync。这实际上会导致路径损坏,因为它被 lite-server 使用,并且如果未指定,则转换为类似 \local\index.html 的路径,而不是 \.\index.html

        【讨论】:

          【解决方案6】:

          最近的更改 (@2.1.0) 允许您通过 bs-config.json 设置您的配置,包括浏览器:

          {
            "browser": "chrome"
          }
          

          {
            "browser": ["chrome","firefox"]
          }
          

          如果您想为每个浏览器设置单独的脚本,您可以在 package.json 中执行以下操作:

          {
            "scripts": {
              "lite": "lite-server",
              "lite:ff": "lite-server --c bs-firefox.json",
              "lite:c": "lite-server --c bs-chrome.json",
              "lite:ie": "lite-server --c bs-ie.json",
              "lite:all": "lite-server --c bs-all.json"
            }
          }
          

          虽然它不是最好的解决方案,因为您必须在多个文件中复制和维护您的配置,但这似乎是 lite-server 维护者的意图。这是当前的lite-server.js 文件供参考。

          【讨论】:

          • 谢谢!我一直在做其他项目,没有机会跟进这个,也没有验证你的答案。但是,我知道作品发生了变化,这看起来与 github 上的问题一致,因此我已将其更改为接受的答案。
          • 这些应该是配置的 .js 而不是 .json 扩展名。 "scripts": { "dev": "tsc && concurrently \"npm run tsc:w\" \"lite-server --c bs-dev.js\" ", "prod": "tsc && concurrently \"npm运行 tsc:w\" \"lite-server --c bs-prod.js\" ", }
          • 在 Mac OS X 上,我需要创建一个包含以下内容的 bs-config.json 文件:{ "browser": "google chrome" }
          • 澄清一点:bs-config.json 文件应该在你的项目的根目录下,或者基本上和你的 package.json 在同一个文件夹中。
          • 我认为应该是 { "browser": "google chrome" } 而不是 { "browser": "chrome" }。 macOS。
          【解决方案7】:

          lite-server实际上是使用browser-sync,所以你应该可以使用--browserCLI command

          "lite:c" : "lite-server --browser chrome --open local"
          

          【讨论】:

          • 查看了浏览器同步的文档后,我相信您是正确的。我认为 github 自述文件中的这一行让我失望了...“通过注入异步脚本标签( 来工作”。我认为这是该软件包的唯一目的,它花了放置在浏览器已经启动之后。现在 +1,但我很确定我会在验证后立即接受这个答案。
          • brsync 很棒,是我使用过的最好的实时重新加载包之一(它可以在您用来查看页面的许多设备/浏览器之间同步屏幕)。如果您将其用作服务器,则无需在代码中添加任何脚本,但如果您使用不同的服务器(我使用 wamp 和谷歌应用引擎开发服务器)提供文件并且仍然使用,则需要添加一个 sn-p实时重新加载功能。
          • 再次感谢,但这并没有按原样工作。它引导我朝着正确的方向前进。 +1 仍然有效,因为您是唯一回复的人,我相信您的提示为我节省了一些时间。作为参考,我自己发布一个答案。
          猜你喜欢
          • 1970-01-01
          • 2020-11-27
          • 1970-01-01
          • 1970-01-01
          • 2014-05-30
          • 1970-01-01
          • 2014-12-06
          • 2010-09-14
          • 1970-01-01
          相关资源
          最近更新 更多