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

IT技术 javascript node.js windows npm
2021-03-03 20:24:24

启动

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

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

6个回答

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

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

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

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

还要注意浏览器名称在不同平台上是不同的：

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

因为我浪费了很多时间，对于 OS X：BROWSER="google chrome"
2021-04-21 20:24:24
对于那些使用 linux 设置默认浏览器的人，如下所示： BROWSER=google-chrome-stable
2021-04-27 20:24:24
此后，高级配置文档的链接发生了变化。现在是facebook.github.io/create-react-app/docs/advanced-configuration
2021-04-29 20:24:24
OP 被标记windows，这也是我的情况，并且由于使用 powershell，建议的解决方案不适用。.env 文件在我的情况下是王者
2021-04-29 20:24:24
在 Mac 上，您还可以通过以下方式将其设置为 Chrome Canary BROWSER=google chrome canary
2021-05-12 20:24:24

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

代替：

"start": "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"
@RonInbar 可能您需要chrome在 Windows 中指定可执行文件的完整路径。
2021-04-26 20:24:24
启用远程调试： "start": "BROWSER='google chrome' BROWSER_ARGS='--remote-debugging-port=9222' react-scripts start"
2021-04-26 20:24:24
我认为 Windows 语法是错误的。我得到'BROWSER' is not recognized as an internal or external command, operable program or batch file.
2021-05-10 20:24:24

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

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

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

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

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

只是更正：如果将“cross-env”安装为 dev-dependencies 会更好。所以更好的命令是安装包： npm install --save-dev cross-env
2021-04-26 20:24:24
我在Ubuntu 20.04，以下对我有用package.json "start": "BROWSER=chromium node scripts/start.js",
2021-04-26 20:24:24
@EdgarManukyan 难怪，但 OP 被标记 windows
2021-04-30 20:24:24
这是在运行 VS Code 的 Windows 上对我有用的唯一解决方案。
2021-05-03 20:24:24

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

BROWSER="firefox developer edition"
BROWSER=firefox developer edition在大苏尔对我BROWSER=Firefox Developer Edition有用，虽然以前这是🤔。最好两个都试试。没有引用或完整路径有效。
2021-05-06 20:24:24
简单的工作解决方案，使用 macOS catalina
2021-05-07 20:24:24
这是一个相当个人的偏好，所以你可能想要将它添加到.env.local（git 忽略）
2021-05-14 20:24:24
这实际上对我不起作用（目前在 Windows 机器上），但使用BROWSER="firefox"仍会打开 Firefox Developer Edition，所以我想我很好
2021-05-16 20:24:24

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

set BROWSWER=chrome

然后npm start像往常一样运行

其它你可能感兴趣的问题
上一篇Javascript在元素之后附加子元素 下一篇JavaScript 添加十进制数字问题