19

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

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

如果所有这些都是正确的,或者至少是它的要点,那么我似乎只需要--open chrome在定义的命令PATH末尾指定.litepackage.json

所以像...

"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\" "
},

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

4

7 回答 7

23

最近的更改 (@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文件以供参考。

于 2016-03-21T17:43:10.697 回答
3

更新

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没有对用于解析的browser参数做任何事情。yargs我几乎编辑了 Sasxa 的答案,但认为它分歧太大,因为你真的不能使用browser-syncCLI。 lite-server已经在使用browser-syncAPI。特别是,init()正在被调用,并且browser需要在那里指定选项。Angular 2 快速入门指南package.json与命令行 arg之间存在完全脱节。browser-syncbrowser


修复:

因此,受 Sasxa 回答的启发,browser参数将被传递给yargs.argv, 带有 value 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",而文档说“谷歌浏览器”......

// 在 Chrome 中打开网站

browser: "google chrome"

// 在 Chrome 和 Firefox 中打开网站

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

命令行 open参数被 使用lite-server,作为startPath传递给的一部分browser-syncbrowser对于指定要启动的所需浏览器似乎是规范正确的,因为它最终被browser-sync. 此外,关于这一点,Sasxa 的回答是不正确的,因为假设--open local它会browser-sync毫发无伤。这实际上会导致路径损坏,因为它被 lite-server 消耗,并转换为类似 的路径\local\index.html,而不是\.\index.html未指定的路径。

于 2016-01-18T16:37:46.297 回答
3

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

{
  "browser": "Google Chrome"
}
于 2017-01-26T08:24:37.823 回答
2

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

{
"browser": ["chrome","firefox"]         //to make chrome to default browser
}
于 2017-01-06T06:43:29.840 回答
2

lite-server实际上正在使用browser-sync,因此您应该能够为此使用--browser CLI 命令

"lite:c" : "lite-server --browser chrome --open local"
于 2016-01-16T08:49:16.737 回答
0

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

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

于 2016-09-23T03:57:04.833 回答
0

使用 Debian/Ubuntu 和update-alternatives

我能够确认您可以在此处通过此命令全局更改此过程。当前lite-server使用browser-syncwhich uses opnwhich捆绑了它自己的xdg-open. 您可以使用以下方式进行配置,

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

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

于 2017-03-14T22:01:10.847 回答