在angular2快速入门指南中打开带有lite-server的非默认浏览器

Question

在遵循Angular 2快速入门指南的TypeScript版本后，我想知道是否可行，如果可以，如何配置lite-server以启动默认浏览器以外的浏览器。

似乎lite-server将采用命令行args，通过yargs.argv提供给它。 并且似乎yargs将尝试基于相当常见的标准来解析命令行args（即，如果令牌以--开头，它表示参数名称，否则为参数值）以获取argv 。 lite-server将尝试使用它从argv获取的open属性，这最终是通过[启动进程的其中一个节点包]启动浏览器。 点开？ xdg -open？ 不确定，对我来说并不是真的那么重要，只要我的假设（基于查看其中几个过程发射器）是正确的，他们都可以选择接受定义要启动的过程的参数。 如果省略，将使用默认浏览器，因为要打开的文件类型是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\" "
},

如果这看起来很麻烦，我道歉，但我不会在计算机上，我可以测试这几天，我需要知道我是否有答案，可以停止研究这个:)。 谢谢！

Answer 1

最近的更改（@ 2.1.0）允许您通过bs-config.json设置您的配置，包括浏览器：

{
  "browser": "chrome"
}

要么

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

如果要为每个broswer设置单独的脚本，可以在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文件供参考。

Answer 2

UPDATE

lite-server项目已更新，包含可配置的浏览器选择。 我只是出于历史目的离开这个，并支持恩德尔的回答。

---

lite-server的创建者一直在寻求以某种标准方式解决配置所有browser-sync选项的问题 （建议使用.rc文件）。 因此，当您阅读它时，这个问题和答案可能已经过时了。

---

谢谢Sasxa指出这一点......

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

这对于提出这个特定问题的解决方案至关重要（有点令人尴尬的是我忽略或注销了简单的var sync = require('browser-sync').create(); ... sync.init() ）。

但是，这个答案不会有效，因为这......

...所以你应该能够使用--browser CLI命令 。

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

......开箱即用。 事实证明， lite-server没有对yargs用于解析的browser参数做任何事情。 我几乎编辑了Sasxa的答案，但决定它分歧太多，因为你真的不能使用browser-sync CLI。 lite-server已经在使用browser-sync API。 特别是，正在调用init() ，并且需要在那里指定browser选项。 关于browser命令行arg，Angular 2快速入门指南的package.json与browser-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 Quick Start 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" ，而文档说“google chrome”......

//在Chrome中打开网站

browser: "google chrome"

//在Chrome和Firefox中打开网站

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

lite-server正在使用 命令行 open参数，作为传递给browser-sync的startPath一部分。 browser似乎在规范上可以指定要启动的所需浏览器，因为它最终被browser-sync中的名称使用。 另外，关于这一点，Sasxa的回答是错误的假设--open local会使browser-sync没有受到损害。 这实际上会导致损坏的路径，因为它被lite-server使用，并转换为类似\\local\\index.html的路径，而不是\\.\\index.html如果不指定的话。

Answer 3

lite-server实际上是使用browser-sync ，所以你应该能够使用--browser CLI命令 。

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

Answer 4

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

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

Answer 5

对于MacOS，我不得不在“bs-config.json”文件中使用区分大小写的值：

{
  "browser": "Google Chrome"
}

Answer 6

对于Windows（和Mac）新手（而不是新手:)：你的第一个冲动可能是在你的项目目录中寻找'bs-config.json'。 你找不到它。 您需要在根项目目录下创建一个文件，并将其命名为bs-config.json 。 在其中，您可以根据上述答案指定您偏好的浏览器-ie，：{“browser”：“chrome”}

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

Answer 7

使用Debian / Ubuntu和update-alternatives

我能够确认您可以通过此命令在全局更改此过程。 目前lite-server使用browser-sync ，它使用opn 捆绑自己的xdg-open副本 。 您可以配置，

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

我发现它更可取。 它对所有angular2示例都有效，并且对于OS的其余部分也会持续存在。 您也可以通过隐身方式打开链接（上面链接中的说明）。