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

按照Angular 2快速入门指南的TypeScript版本,我想知道是否有可能,如果是的话,如何configurationlite-server来启动默认浏览器以外的浏览器。

看起来lite-server将采用命令行参数,通过yargs.argv提供给它。 看来yargs会试图根据相当普通的标准来parsing命令行参数(例如,如果一个标记以--开始,它代表一个参数名称,否则是一个参数值)来获得argv 。 lite-server将尝试使用从argv获得的open属性,这最终是通过[启动进程的节点包之一]启动浏览器。 点开? xdg – 打开? 不确定的是,只要我的假设(基于查看这些过程启动器中的几个)是正确的,他们都可以select定义启动过程的参数。 如果省略,则将使用默认浏览器,因为要打开的文件types是html,这就是发生的情况。

如果所有这些都是正确的,或者至less是它的要点,那么看来我只需要指定 – 打开--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\" " }, 

我很抱歉,如果这似乎是蠢事,但我不会在一台电脑,我可以testing这几天,我需要知道,如果我有答案,可以停止研究这:)。 谢谢!

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

 { "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" } } 

虽然这不是最好的解决scheme,但是您必须将您的configuration复制并维护在多个文件中,这似乎是lite-server维护者所期望的。 这里是目前的lite-server.js文件供参考。

UPDATE

lite-server项目已经更新,包含可configuration的浏览器select。 我只是为了历史目的而离开这个,并且支持恩德的回答。


lite-server的创build者一直在寻找以某种标准方式(build议的.rc文件)来configuration所有browser-sync选项的问题 。 所以这个问题和答案可能在你阅读的时候已经过时了。


谢谢Sasxa指出这一点…

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

这对于为这个特定问题提出解决scheme至关重要(有点尴尬,我忽略了或者把它写成了一些简单的var sync = require('browser-sync').create();sync.init() )。

但是,这个答案不会工作,因为这…

…所以你应该可以使用--browser CLI命令 。

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

没有开箱即可使用。 事实certificate, lite-server并没有对yargs用于parsing的browser参数做任何事情。 我已经差不多编辑了Sasxa的答案,但是认定它太多了,因为你真的不能使用browser-sync CLI。 lite-server已经在使用browser-sync API。 特别是init()被调用,并且需要在那里指定browser选项。 Angular 2快速入门指南的package.jsonbrowser-sync之间的browser命令行参数arg完全断开。


修正:

所以受到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 }; 

然后,当调用浏览器同步的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 "google chrome"作为browser价值,以获得铬实际启动。 我需要使用"chrome" ,而文档说“谷歌铬”…

//在Chrome中打开网站

browser: "google chrome"

//在Chrome和Firefox中打开网站

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

lite-server正在使用 命令行 open参数,作为传递给browser-syncstartPath一部分。 browser似乎正确地指定所需的浏览器启动正确,因为它在browser-sync最终被该名称使用。 此外,在这方面,Sasxa的答案是不正确的 – 开放--open local会使browser-sync毫发无损。 这实际上会导致损坏的path,因为它是由lite-server使用的,并转换为像\local\index.html这样的path,而不是\.\index.html如果未指定的话。

lite-server实际上是使用browser-sync ,因此您应该可以使用--browser CLI命令 。

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

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

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

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

 { "browser": "Google Chrome" } 

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

原因是文件lite-server.js查找上面的configuration文件; 如果找不到,则使用lite-server默认值,默认情况下为Windows系统上的Internet Explorer。

使用Debian / Ubuntu和update-alternatives

我能够确认你可以通过这个命令在全球范围内改变这个过程。 目前lite-server使用browser-sync ,它使用opn 捆绑自己的xdg-open副本 。 你可以configuration这个,

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

我发现它是可取的。 它对所有的angular度2的例子都有效,并且对于其余的操作系统也是一样的。 您还可以使链接以隐身状态打开(上面链接中的说明)。