Javascript create-react-app：如何使用特定浏览器“npm start”？

create-react-app: How do I "npm start" with a specific browser?

提问by Osama Qarem

npm start

启动

starts the react server on the default browser, which is Firefox for me. I like Firefox for browsing but prefer Chrome in web development for its developer tools. Is there a way to force "npm start" to start the server with Chrome, without changing my default browser to chrome? I am using Bash on Windows.

在默认浏览器上启动反应服务器，对我来说是 Firefox。我喜欢用 Firefox 浏览，但更喜欢 Chrome 在 Web 开发中的开发工具。有没有办法强制“npm start”使用 Chrome 启动服务器，而无需将我的默认浏览器更改为 chrome？我在 Windows 上使用 Bash。

Edit:I used "create-react-app" to create my server and this adds a script to "packages.json" file for "npm start". The script starts the localhost server with the default browser. How do I modify the script added by "create-react-app" such that it starts with a different browser?

编辑：我使用 "create-react-app" 来创建我的服务器，这会为 "npm start" 的 "packages.json" 文件添加一个脚本。该脚本使用默认浏览器启动本地主机服务器。如何修改“create-react-app”添加的脚本，使其以不同的浏览器启动？

采纳答案by Abbe

This is possible with the BROWSERenvironment variable.

这可以通过BROWSER环境变量实现。

You can also do it directly in the terminal: BROWSER=chrome npm start

您也可以直接在终端中执行此操作： BROWSER=chrome npm start

This is described in the Advanced Configuration docs:

这在高级配置文档中有描述：

By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a browser to override this behavior, or set it to none to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to npm start will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the .js extension.

默认情况下，Create React App 将打开默认系统浏览器，支持 macOS 上的 Chrome。指定一个浏览器来覆盖此行为，或将其设置为 none 以完全禁用它。如果您需要自定义浏览器的启动方式，您可以指定一个节点脚本。传递给 npm start 的任何参数也将传递给此脚本，并且提供应用程序的 url 将是最后一个参数。您脚本的文件名必须具有 .js 扩展名。

Also note that the browser names are different on different platforms:

另请注意，不同平台上的浏览器名称不同：

The app name is platform dependent. Don't hard code it in reusable modules. For example, Chrome is google chrome on macOS, google-chrome on Linux and chrome on Windows.

应用程序名称取决于平台。不要在可重用模块中对其进行硬编码。例如，Chrome 在 macOS 上是 google chrome，在 Linux 上是 google-chrome，在 Windows 上是 chrome。

回答by n0noob

As you have mentioned that you are using create-react-appfor creating react app and you want chrome to open on hitting npm start. Set BROWSERvariable in package.jsonpresent in your project in the following manner:

正如您所提到的，您正在create-react-app用于创建 react 应用程序，并且您希望 chrome 在点击时打开npm start。按以下方式在您的项目中设置BROWSER变量package.json：

Replace:

代替：

"start": "react-scripts start"

With:

和：

• Linux:

  "start": "BROWSER='google-chrome-stable' react-scripts start"
  

• Windows:

  "start": "BROWSER='chrome' react-scripts start"
  

• OS X:

  "start": "BROWSER='google chrome' react-scripts start"
  

• Linux：

  "start": "BROWSER='google-chrome-stable' react-scripts start"
  

• 视窗：

  "start": "BROWSER='chrome' react-scripts start"
  

• 操作系统：

  "start": "BROWSER='google chrome' react-scripts start"
  

回答by Vlad

Method by using .envfile in the root of your NodeJS app.

.env在 NodeJS 应用程序的根目录中使用文件的方法。

BROWSER="firefox developer edition"

回答by UTKARSH SINHA

Using above technique, you may end up with error 'BROWSER' is not recognized as an internal or external command, operable program or batch file.

使用上述技术，您可能会遇到错误 'BROWSER' is not recognized as an internal or external command, operable program or batch file.

To over come this Do an npm install of cross-env in your cloned repo: npm install --save cross-env

为了克服这个问题，请在克隆的存储库中进行跨环境的 npm 安装： npm install --save cross-env

Try to use this command in the package.jsonfile

尝试在package.json文件中使用此命令

"start": "cross-env BROWSER=chrome react-scripts start"

"start": "cross-env BROWSER=chrome react-scripts start"

BROWSER is an environment variable, and you can use the cross-env package to properly handle it.

BROWSER 是一个环境变量，你可以使用 cross-env 包来正确处理它。

回答by Srinivasan N

To open in chrome we need to set it as a default browser.

要在 chrome 中打开，我们需要将其设置为默认浏览器。

Setting --> Default browser --> Make default -->

设置 --> 默认浏览器 --> 设为默认 -->

and choose chrome if any other browser is chosen.

如果选择任何其他浏览器，请选择 chrome。

It worked on windows 10.

它适用于 Windows 10。

回答by mrpaz

In Windows cmd, set env variable for desired browswer:

在 Windows cmd 中，为所需的浏览器设置 env 变量：

set BROWSWER=chrome

set BROWSWER=chrome

Then just run npm startlike normal

然后npm start像往常一样运行

回答by daGo

I don't like to repeatedly create a new .envfile or prepend npm startevery time with an additional command. You can specify your browser of choice instead of nonein your shell config file. Type in your terminal the following commands:

我不喜欢每次都重复创建一个新的.env文件或在npm start之前添加一个额外的命令。您可以在 shell 配置文件中指定您选择的浏览器而不是none。在终端中输入以下命令：

echo export BROWSER=none >> ~/.bashrc
source ~/.bashrc

At this point you can run npm startand be happy.

在这一点上，你可以奔跑npm start并快乐起来。

回答by Gk Mohammad Emon

If you are a Windowsuser then go to Sitting -> Default apps -> Web browserthen select your desired browser.If you are a Linuxuser then go to System-settings -> Details. (Note:In older versions of Ubuntu Detailsis called System Info)

如果您是Windows用户，则转到Sitting -> Default apps -> Web browser然后选择所需的浏览器。如果您是Linux用户，则转到System-settings -> Details。（注意：在旧版本的 Ubuntu 中，详细信息称为系统信息）

回答by Narendra Solanki

There is one package called set-default-browserhttps://www.npmjs.com/package/set-default-browser

有一个名为https://www.npmjs.com/package/set-default-browser 的包set-default-browser

just download package from there and add following code

只需从那里下载包并添加以下代码

var setDefaultBrowser = require('set-default-browser');

setDefaultBrowser("chrome");

Or you can just run this set-default-browser chrome

或者你可以运行这个 set-default-browser chrome

Thanks!

谢谢！

回答by lem

Add script to your package.json file

将脚本添加到 package.json 文件中

"devserver": "live-server --browser=Chrome"