在 Visual Studio 中运行 Webpack-dev-server - .net 核心项目答案

【问题标题】：Running Webpack-dev-server on run in visual studios - .net core project在 Visual Studio 中运行 Webpack-dev-server - .net 核心项目
【发布时间】：2017-02-06 23:08:58
【问题描述】：

我正在尝试设置我的环境，因此当我在 Visual Studio 2015 中单击运行时，它将安装我的节点模块，然后运行前端 webpack-dev-server。

我加了

"precompile": [ "yarn install", "yarn run start" ]

到我的scripts 我的project.json

如果您想查看我正在运行的启动脚本： https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/scripts/start.js

它工作，有点。它将启动服务器，但不会在浏览器中打开它，并且有点破坏 VS 到我无法停止调试的地步，并且无法关闭 VS，因为它正在调试。

那么无论如何我可以按照我想要的方式进行这项工作，还是我应该使用 cmd 来启动 webpack-dev-server？

我刚试过：

"precompile": [ "yarn install", "start cmd /k yarn run start" ]

希望我可以让 VS 打开命令提示符并运行启动脚本，但这不起作用。

我找到了答案。将保持开放状态，看看是否有人有更好的解决方案。

在我的 Startup.cs 中我添加了：

Process.Start("CMD.exe", "/K yarn run start");
Process.Start("cmd", "/C start http://localhost:3000");

第一行在 cmd 中运行我的命令，第二行在我的 webpack-dev-server 端口打开我的默认浏览器。

根据用例可能会起作用的第二种解决方案。

下载node tools for VS 并在您的解决方案中创建一个新的空节点项目。您可以转到项目的属性，并且有一个名为Script (startup file) 的输入。你可以把它指向你的启动脚本，在我的例子中是scripts/start.js

【问题讨论】：

标签： .net visual-studio webpack asp.net-core webpack-dev-server

【解决方案1】：

这是我想出的解决方案：

在我的 Startup.cs 中我添加了：
Process.Start("CMD.exe", "/K yarn run start");
Process.Start("cmd", "/C start http://localhost:3000");
第一行在 cmd 中运行我的命令，第二行打开我的我的 webpack-dev-server 端口的默认浏览器。

根据用例可能会起作用的第二种解决方案。

下载node tools for VS并创建一个新的空节点解决方案中的项目。您可以转到项目的属性和有一个名为Script (startup file) 的输入。你可以指出你的启动脚本，在我的例子中是scripts/start.js

【讨论】：

【解决方案2】：

另一种方法是通过将其启动绑定到 Task Runner Explorer 中的 Project Open 绑定来启动 webpack 开发服务器，而不是 After Build 绑定。这样，在您使用 Visual Studio 构建解决方案之前，它已经运行的 webpack 开发服务器。

这种方法的优点是不会因为 webpack 服务器进程仍在运行而挂起 VS 构建序列。

我使用 VS NPM Task Runner 扩展来做绑定，并有一个 NPM 脚本命令，如：

"watch": "webpack-dev-server --hot --inline"

然后我将脚本绑定到 Project Open 绑定

您还可以将 yarn install 命令合并为在 Project Open 上运行的 NPM 脚本的一部分。

【讨论】：

我发现 VS NPM Task Runner 扩展是 Yarn 感知的，所以它会运行 yarn install 代替 NPM 安装，如果你的机器上安装了 Yarn，所以你不必显式将“yarn install”合并为 NPM 脚本。有一个 Yarn Task Runner 扩展，但是目前它还没有针对 VS 2017 进行更新，但我发现 NPM Task Runner 可以解决问题。

【解决方案3】：

安装Command Task runner，它将允许您在某些事件上运行命令。

在新的commands.json 文件中，定义如下脚本：

{
  "commands": {
    "InstallPackages": {
      "fileName": "cmd.exe",
      "workingDirectory": ".",
      "arguments": "/K yarn run start"
    },
    "OpenSite": {
      "fileName": "cmd.exe",
      "workingDirectory": ".",
      "arguments": "/C start http://localhost:3000"
    }
  },
  "-vs-binding": { "AfterBuild": [ "InstallPackages", "OpenSite" ] }
}

您还可以删除 "-vs-binding" 行并通过 Task Runner Explorer UI 手动进行绑定。

这胜过每次更改代码以显式启动 Web 服务器。

我应该补充一点，我发现当 Web 服务器的命令提示符窗口仍然打开时，Visual Studio 不会退出。我想这是公平的，但它让我失望了几次（我以这种方式启动 Web 服务器并让它运行）。简单的解决方案是关闭 Web 服务器窗口，VS 将正常关闭，无需进一步提示。

【讨论】：