web-dev-qa-db-fra.com

Ouverture d'un navigateur autre que celui par défaut avec lite-server dans angular2 - Guide de démarrage rapide

Après avoir suivi la version TypeScript du guide de démarrage rapide Angular 2 , je me demandais s’il était possible et, le cas échéant, comment configurer le serveur lite pour qu'il lance un navigateur autre que celui par défaut.

Il semble que lite-server accepte les arguments en ligne de commande, qui lui sont servis via yargs.argv. Et il semble que yargs tentera d’analyser les arguments de la ligne de commande en fonction de normes assez communes (c’est-à-dire si un jeton commence par un --, il représente un nom d’argument, sinon une valeur d’argument) pour obtenir argv. lite-server tentera d'utiliser la propriété open qu'il tire de argv, qui est finalement ce qui lance le navigateur via [l'un des packages de nœud qui lance les processus]. noeud ouvert? xdg -open? Pas sûr, pas vraiment aussi important pour moi pour le moment, tant que mon hypothèse (basée sur l'examen de plusieurs de ces lanceurs de processus) est correcte, que tous prennent éventuellement un argument définissant le processus à lancer. Si omis, le navigateur par défaut serait utilisé car le type de fichier à ouvrir est HTML, ce qui est le cas.

Si tout cela est correct, ou du moins l'essentiel, alors il me semble que je dois juste spécifier --open chrome, par exemple (en supposant que chrome est dans ma PATH - travaillant sur une machine gagnante), à ​​la fin de la commande lite définie dans package.json.

Donc, quelque chose comme ...

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

Je m'excuse si cela semble inepte, mais je ne serai pas devant un ordinateur où je peux tester cela pendant quelques jours, et j'ai besoin de savoir si j'ai la réponse et si je peux arrêter de chercher cela :). Merci!

node.jsangularlaunching
19
Eric Lease

Les modifications récentes (@ 2.1.0) vous permettent de définir vos configurations, y compris le (s) navigateur (s), via bs-config.json:

{
  "browser": "chrome"
}

ou

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

Si vous souhaitez configurer des scripts distincts pour chaque réponse, vous pouvez procéder comme suit dans votre 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"
  }
}

Bien que ce ne soit pas la meilleure solution car vous devez copier et gérer votre configuration dans plusieurs fichiers, cela semble être ce que le responsable du serveur lite a prévu. Voici le fichier lite-server.js actuel pour référence.

23
ender

METTRE À JOUR

Le projet lite-server a été mis à jour pour intégrer la sélection du navigateur configurable. Je ne laisse cela que pour des raisons historiques et soutiens la réponse d'Ender.

Le créateur de lite-server _ { cherche à résoudre le problème } de configurer toutes les options browser-sync de manière standard (fichier .rc suggéré). Donc, cette question et cette réponse risquent d’être obsolètes au moment où vous le lirez.

Merci Sasxa pour l'avoir signalé ... 

lite-server utilise réellement browser-sync ...

Cela était essentiel pour trouver une solution à ce problème particulier (il est un peu embarrassant que j’ai oublié de le mentionner ou le qualifie de var sync = require('browser-sync').create(); ... sync.init() trivial). 

Cependant, cette réponse ne fonctionnera pas telle quelle car cela ...

... vous devriez donc pouvoir utiliser --browsercommande CLI } _ pour cela.

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

... ne fonctionne pas hors de la boîte. Il s'avère que lite-server ne fait rien avec l'argument browser que yargs est utilisé pour analyser. J'avais presque modifié la réponse de Sasxa, mais j'ai décidé qu'elle divergeait trop, en ce sens que vous ne pouvez vraiment pas utiliser le browser-sync CLI. lite-server utilise déjà l'API browser-sync. En particulier, init() est appelé et l'option browser doit être spécifiée à cet emplacement. Il existe une déconnexion complète entre les package.json et browser-sync du Guide de démarrage rapide de Angular 2 par rapport à l'argument browser de la ligne de commande.

Le correctif:

Alors inspiré par la réponse de Sasxa, l'argument browser sera passé à yargs.argv, avec la valeur chrome.

lite-server.js devrait être modifié pour le transmettre à browser-sync. Ceci peut être ajouté en tant que propriété sur l'objet 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
  };

Ensuite, lorsque la fonction init() de la synchronisation du navigateur est appelée, spécifiez l'option 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
});

Maintenant, revenant à Angular 2 Quick Start package.json, les valeurs d’argument suivantes peuvent être utilisées pour l’argument browser: 

  • chrome 
  • firefox 
  • iexplore

ainsi...

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

Quelques réflexions finales

Vous devrez peut-être utiliser "google chrome" en tant que valeur browser pour que Chrome se lance réellement. J'avais besoin d'utiliser "chrome", alors que les docs disent "google chrome" ...

// Ouvrir le site dans Chrome 

browser: "google chrome"

// Ouvrir le site dans Chrome & Firefox

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

La ligne de commande open argument est utilisée par lite-server dans le cadre de startPath transmis à browser-sync. browser semble canoniquement correct pour spécifier le navigateur à lancer, car il est utilisé par ce nom dans browser-sync. De plus, à propos de cela, la réponse de Sasxa était incorrecte en supposant que --open local le rendrait à browser-sync sans blessure. Cela causera en fait un chemin corrompu, car il est consommé par lite-server et transformé en un chemin tel que \local\index.html, au lieu de \.\index.html s'il n'est pas spécifié.

3
Eric Lease

Pour MacOS, j'ai dû utiliser la valeur sensible à la casse dans le fichier "bs-config.json":

{
  "browser": "Google Chrome"
}
2
Scott S

Créez un nom de fichier "bs-config.json" dans votre dossier de projet et ajoutez le code ci-dessous à ce fichier:

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

lite-server utilise en fait browser-sync, vous devriez donc pouvoir utiliser --browsercommande CLI pour cela.

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

Utiliser Debian/Ubuntu et update-alternatives

J'ai pu confirmer que vous pouvez changer ce processus globalement avec cette commande ici . Actuellement, lite-server utilise browser-sync qui utilise opn qui regroupe sa propre copie d'un xdg-open . Vous pouvez configurer ceci avec,

Sudo update-alternatives --config x-www-browser

Je l'ai trouvé préférable. Il prend effet sur tous les exemples angular2 et reste inchangé pour le reste du système d'exploitation. Vous pouvez également rendre les liens ouverts en incognito (instructions dans le lien ci-dessus).

0
Evan Carroll

Pour les débutants Windows (et Mac) (et non les débutants:): Votre première impulsion peut être de rechercher 'bs-config.json' dans le répertoire de votre projet. Vous ne le trouverez pas. Vous devez créer un fichiersous le répertoire du projet racineet nommez-le bs-config.json . Dans celui-ci, vous spécifiez le navigateur de votre choix, selon la réponse ci-dessus -i.e.,: {"Browser": "chrome" }

La raison en est que le fichier lite-server.js recherche le fichier de configuration ci-dessus; s'il ne le trouve pas, il utilise les paramètres par défaut lite-server et Internet Explorer par défaut sur les systèmes Windows. 

0
jpumar