[英]Opening non-default browser with lite-server in angular2 quick start guide
Having followed the TypeScript version of the Angular 2 Quick Start guide , I was wondering if it is possible, and if so how to configure the lite-server to launch a browser other than the default. 在遵循Angular 2快速入门指南的TypeScript版本后,我想知道是否可行,如果可以,如何配置lite-server以启动默认浏览器以外的浏览器。
It seems lite-server will take command line args, served to it via yargs.argv
. 似乎lite-server将采用命令行args,通过
yargs.argv
提供给它。 And it seems yargs
will attempt to parse command line args based on fairly common standards (ie If a token begins with a --
, it represents an argument name, otherwise an argument value) to obtain argv
. 并且似乎
yargs
将尝试基于相当常见的标准来解析命令行args(即,如果令牌以--
开头,它表示参数名称,否则为参数值)以获取argv
。 lite-server will attempt to use the open
property that it gets from argv
, which is ultimately what launches the browser via [one of the of the node packages that launches processes]. lite-server将尝试使用它从
argv
获取的open
属性,这最终是通过[启动进程的其中一个节点包]启动浏览器。 node-open? 点开? xdg -open?
xdg -open? Not sure, not really as important to me right now as long as my assumption (based on looking at several of these process launchers) is correct, that they all optionally take an argument defining the process to launch.
不确定,对我来说并不是真的那么重要,只要我的假设(基于查看其中几个过程发射器)是正确的,他们都可以选择接受定义要启动的过程的参数。 If omitted, the default browser would be used since the file type to open is html, which is what happens.
如果省略,将使用默认浏览器,因为要打开的文件类型是html,这就是发生的情况。
If all that is correct, or at least the gist of it, then it seems I just need to specify --open chrome
, for example (assuming chrome is in my PATH
- working on a win machine btw), at the end of the lite
command defined in package.json
. 如果所有这些都是正确的,或者至少是它的要点,那么我似乎只需要指定
--open chrome
,例如(假设chrome在我的PATH
- 在win机器上工作),在结束时在package.json
定义的lite
命令。
So something like... 所以像......
"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\" "
},
I apologize if this seems inane, but I won't be at a computer where I can test this for a few days, and I need to know if I have the answer and can stop researching this :). 如果这看起来很麻烦,我道歉,但我不会在计算机上,我可以测试这几天,我需要知道我是否有答案,可以停止研究这个:)。 Thanks!
谢谢!
Recent changes (@2.1.0) let you set your configs, including browser(s), via bs-config.json
: 最近的更改(@ 2.1.0)允许您通过
bs-config.json
设置您的配置,包括浏览器:
{
"browser": "chrome"
}
or 要么
{
"browser": ["chrome","firefox"]
}
If you want to set up separate scripts for each broswer you can do the following in your package.json
: 如果要为每个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"
}
}
While it's not the best solution since you have to copy and maintain your config in multiple files, it seems to be what is intended by the lite-server maintainer. 虽然它不是最好的解决方案,因为你必须在多个文件中复制和维护你的配置,它似乎是lite-server维护者的意图。 Here's the current lite-server.js file for reference.
这是当前的lite-server.js文件供参考。
UPDATE UPDATE
The lite-server
project has been updated to incorporate configurable browser selection. lite-server
项目已更新,包含可配置的浏览器选择。 I'm only leaving this for historical purposes, and support ender's answer. 我只是出于历史目的离开这个,并支持恩德尔的回答。
The creator of lite-server
has been looking to address the issue of configuring all browser-sync
options in some standard way ( .rc
file suggested). lite-server
的创建者一直在寻求以某种标准方式解决配置所有browser-sync
选项的问题 (建议使用.rc
文件)。 So this question and answer may be obsolete by the time you read it. 因此,当您阅读它时,这个问题和答案可能已经过时了。
Thank you Sasxa for pointing this out... 谢谢Sasxa指出这一点......
lite-server
is actually usingbrowser-sync
...lite-server
实际上是使用browser-sync
...
This was critical in coming up with a solution for this particular problem (it's a little embarrassing that I had overlooked or written off as trivial var sync = require('browser-sync').create();
... sync.init()
). 这对于提出这个特定问题的解决方案至关重要(有点令人尴尬的是我忽略或注销了简单的
var sync = require('browser-sync').create();
... sync.init()
)。
However, that answer will not work as is because this... 但是,这个答案不会有效,因为这......
... so you should be able to use
--browser
CLI command for that....所以你应该能够使用
--browser
CLI命令 。
"lite:c" : "lite-server --browser chrome --open local"
...doesn't work out of the box. ......开箱即用。 As it turns out,
lite-server
is not doing anything with the browser
argument that yargs
is used to parse out. 事实证明,
lite-server
没有对yargs
用于解析的browser
参数做任何事情。 I had almost edited Sasxa's answer, but decided it diverged too much, in that you really can't use the browser-sync
CLI. 我几乎编辑了Sasxa的答案,但决定它分歧太多,因为你真的不能使用
browser-sync
CLI。 lite-server
is already using the browser-sync
API. lite-server
已经在使用browser-sync
API。 In particular, init()
is being called, and the browser
option needs to be specified there. 特别是,正在调用
init()
,并且需要在那里指定browser
选项。 There is a complete disconnect between the Angular 2 Quick start guide's package.json
and browser-sync
in regards to the browser
command line arg. 关于
browser
命令行arg,Angular 2快速入门指南的package.json
与browser-sync
之间存在完全脱节。
So inspired by Sasxa's answer, the browser
argument will be passed to yargs.argv
, with value chrome
. 因此受到Sasxa答案的启发,
browser
参数将传递给yargs.argv
,其值为chrome
。
lite-server.js
would have to be modified to pass it along to browser-sync
. 必须修改
lite-server.js
以将其传递给browser-sync
。 This can be added as a property on the options
object... 这可以作为
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
};
Then, when browser-sync's init()
is called, specify the browser
option. 然后,当调用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
});
Now, returning to the Angular 2 Quick Start package.json
, the following argument values can be used for the browser
argument: 现在,返回Angular 2 Quick Start
package.json
,可以将以下参数值用于browser
参数:
chrome
firefox
iexplore
like so... 像这样......
"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\" "
},
You may need to use "google chrome"
as the browser
value to get chrome to actually launch. 您可能需要使用
"google chrome"
作为browser
值才能让Chrome实际启动。 I needed to use "chrome"
, whereas the docs say "google chrome"... 我需要使用
"chrome"
,而文档说“google chrome”......
// Open the site in Chrome
//在Chrome中打开网站
browser: "google chrome"
// Open the site in Chrome & Firefox
//在Chrome和Firefox中打开网站
browser: ["google chrome", "firefox"]
The command line open
argument is being used by lite-server
, as part of the startPath
that is passed to browser-sync
. lite-server
正在使用 命令行 open
参数,作为传递给browser-sync
的startPath
一部分。 browser
seems canonically correct for specifying the desired browser to launch, since it is ultimately being used by that name in browser-sync
. browser
似乎在规范上可以指定要启动的所需浏览器,因为它最终被browser-sync
中的名称使用。 Also, in regards to this, Sasxa's answer was incorrect in assuming --open local
would make it to browser-sync
unscathed. 另外,关于这一点,Sasxa的回答是错误的假设
--open local
会使browser-sync
没有受到损害。 That will actually cause a corrupted path, because it is consumed by lite-server, and transformed into a path like \\local\\index.html
, instead of \\.\\index.html
if left unspecified. 这实际上会导致损坏的路径,因为它被lite-server使用,并转换为类似
\\local\\index.html
的路径,而不是\\.\\index.html
如果不指定的话。
lite-server
实际上是使用browser-sync
,所以你应该能够使用--browser
CLI命令 。
"lite:c" : "lite-server --browser chrome --open local"
Make a file name "bs-config.json" in your project folder and add below code to that file: 在项目文件夹中创建一个文件名“bs-config.json”,并将以下代码添加到该文件中:
{
"browser": ["chrome","firefox"] //to make chrome to default browser
}
For MacOS, I had to use the case sensitive value in the "bs-config.json" file: 对于MacOS,我不得不在“bs-config.json”文件中使用区分大小写的值:
{
"browser": "Google Chrome"
}
For Windows (and Mac) newbies (and not so newbies :): Your first impulse may be to look for 'bs-config.json' within your project directory. 对于Windows(和Mac)新手(而不是新手:):你的第一个冲动可能是在你的项目目录中寻找'bs-config.json'。 You won't find it.
你找不到它。 You need to create a file under the root project directory and name it bs-config.json .
您需要在根项目目录下创建一个文件,并将其命名为bs-config.json 。 Within it you specify the browser of your preference, per the above answer -ie,: {"browser": "chrome" }
在其中,您可以根据上述答案指定您偏好的浏览器-ie,:{“browser”:“chrome”}
The reason being is that file lite-server.js looks for the above config file; 原因是文件lite-server.js查找上面的配置文件; if it doesn't find it, it uses lite-server defaults, defaulting Internet Explorer on Windows systems.
如果它没有找到它,它使用lite-server默认值,在Windows系统上默认Internet Explorer。
update-alternatives
update-alternatives
I was able to confirm that you can change this process globally through this command here . 我能够确认您可以通过此命令在全局更改此过程。 Currently
lite-server
uses browser-sync
which uses opn
which bundles its own copy of a xdg-open
. 目前
lite-server
使用browser-sync
,它使用opn
捆绑自己的xdg-open
副本 。 You can configure this with, 您可以配置,
sudo update-alternatives --config x-www-browser
I found it preferable. 我发现它更可取。 It takes effect on all angular2 examples, and persists for the rest of the OS too.
它对所有angular2示例都有效,并且对于OS的其余部分也会持续存在。 You can also make the links open in incognito (instructions in the link above).
您也可以通过隐身方式打开链接(上面链接中的说明)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.