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

时间：2016-01-16 07:30:10

标签： node.js angular launching

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

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

如果所有这些都是正确的，或者至少是它的要点，那么我似乎只需要指定argv，例如（假设chrome在我的--open chrome中 - 在win机器上工作btw），在PATH中定义的lite命令的末尾。

就像...... 

package.json

我道歉，如果这似乎是无聊的，但我不会在计算机上，我可以测试这几天，我需要知道我是否有答案，可以停止研究这个:)。谢谢！

7 个答案:

答案 0 :(得分：23)

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

答案 1 :(得分：3)

<强>更新

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

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

谢谢Sasxa 指出这个......

  

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

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

然而，这个答案将无法正常运作，因为......

  

...所以你应该可以使用--browser CLI command。

     

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

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

修复：

受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值才能让Chrome实际启动。我需要使用"chrome"，而docs说“google chrome”...

  

//在Chrome中打开网站

     

browser: "google chrome"

     

//在Chrome＆amp;中打开网站火狐

     

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

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

答案 2 :(得分：2)

lite-server实际上正在使用browser-sync，因此您应该可以使用--browser CLI command。

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

答案 3 :(得分：2)

制作文件名＆＃34; bs-config.json＆＃34;在您的项目文件夹中，将以下代码添加到该文件中：

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

答案 4 :(得分：2)

对于MacOS，我必须在＆＃34; bs-config.json＆＃34;中使用区分大小写的值。文件：

{
  "browser": "Google Chrome"
}

答案 5 :(得分：0)

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

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

答案 6 :(得分：0)

使用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示例都有效，并且对于OS的其余部分也会持续存在。您也可以通过隐身方式打开链接（上面链接中的说明）。

相关问题
最新问题