web-dev-qa-db-fra.com

Comment ouvrir un navigateur sur localhost via des scripts npm

J'ai essayé de comprendre comment écrire un npm script qui aboutira au lancement de l'application dans le navigateur de l'utilisateur sans que celui-ci ait à ouvrir manuellement le navigateur et à accéder à localhost:1234.

En ce moment, mon script se lit comme suit:

"start": "npm run build && npm run dev",
"build": "npm run clean && npm run mkdir && npm run build:html && npm run build:css && npm run build:js",
"dev": "webpack-dev-server --inline --hot --content-base build --history-api-fallback",

Vouloir ajouter "open": <some code here>,

Ainsi, lorsque quelqu'un accède à GitHub et clone ou retire de mon référentiel, il reçoit les instructions relatives à l'exécution de l'application. Je pensais simplement que l’automatisation serait une belle addition.

Quelqu'un sait comment cela est possible? Je suis sûr que c'est le cas et je pense que cela a quelque chose à voir avec l'appel d'une commande en bash. Merci d'avance pour l'aide!

npm-startnpm-scripts
10
rockchalkwushock

Cela peut être réalisé en incluant quelques paquets supplémentaires dans votre projet.

Forfaits supplémentaires

Installer serveur http :

$ npm install http-server --save-dev

et simultanément :

$ npm install concurrently --save-dev

scripts npm

Ajoutez le script open suivant à package.json:

"scripts": {
    "start": "npm run open",
    "open": "concurrently \"http-server -a localhost -p 1234\" \"open http://localhost:1234/build\""
 }

Remarque

  1. start sera en fait défini comme suit pour inclure les tâches que vous avez actuellement:

    "start": "npm run build && npm run dev && npm run open",

  2. Le code dans le script open ci-dessus qui se lit comme suit:

    open http://localhost:1234/build

    ... suppose que la tâche build que vous avez définie précédemment génère un index.html dans un dossier build. Si le nom du fichier est différent, vous devrez le définir. Par exemple.

    open http://localhost:1234/build/the_html_file_name.html

  3. Vous devrez peut-être ajouter un délai entre le lancement du serveur et l'ouverture du fichier, juste pour attendre un peu jusqu'à ce que le serveur démarre. Si c'est le cas, installez également sleep-ms :

    $ npm install sleep-ms --save-dev

    et remplacez le script open par:

    "open": "concurrently \"http-server -a localhost -p 1234\" \"sleepms 1000 && open http://localhost:1234/build\""

Plateforme croisée

Malheureusement, la commande open n'est pas prise en charge sur plusieurs plates-formes. Pour résoudre ce problème, recherchez opener ou opn-cli et remplacez la commande en conséquence.

Cependant, les deux packages (opener et opn-cli) utilisent Object.assign () so ne fonctionneront pas dans les anciennes versions de nodejs.

Edit: Pour ouvrir une fenêtre de navigateur après le démarrage du serveur, http-server accepte désormais l'option -o . Ceci peut être utilisé à la place des packages opener ou opn-cli.

19
RobC

Pour Webpack users: OpenBrowserPlugin fait le tour aussi!

Installer une dépendance:

npm install open-browser-webpack-plugin --save-dev

Et add ceci dans le fichier de configuration webpack:

var OpenBrowserPlugin = require('open-browser-webpack-plugin');

...

plugins: [
  new OpenBrowserPlugin({ url: 'http://localhost:3000' })
]
8
Made in Moon

Vous avez juste besoin :

$ start http: // localhost: 124

J'ai testé sous Windows 10.）


Les scripts dont vous avez besoin sont:

"open": "start http: // localhost: 1234 "


Mais vous devez faire attention à ce que, dans Windows 10, vous devez placer "start http: // localhost: 1234 " avant que votre serveur node.js ne démarre.

J'espère vous aider.

6
Lancer.Yan

Si vous utilisez Webpack Il existe un autre moyen de le faire en utilisant le webpack-dev-server 

  • Installez-le en utilisant npm install webpack-dev-server --save-dev 

  • Ensuite, lancez webpack-dev-server ou configurez npm script comme ceci:
    "start": "webpack-dev-server"

  • Ensuite, accédez à http://localhost:8080 

Il sert par défaut des fichiers du répertoire en cours. Si vous voulez servir des fichiers depuis un autre répertoire, vous devez utiliser l'option --content-base comme ceci: 

webpack-dev-server --content-base thefolderyouwanttoserve/

Plus d'informations sur webpack-dev-server ici dans la documentation officielle du webpack.

0
billyjov