如何让 Visual Studio 2017 调用 `yarn start`

Question

我有一个 React 项目，我运行它与 yarn start 运行s react-scripts start.

我想使用 Visual Studio 2017 编辑代码和运行应用程序，但我不想运行使用 VS2017 node.js 东西，我想按 F5 并继续使用反应脚本。

有什么办法吗？

##更新##

对于那些想要更好的 .njsproj 文件格式的人，开发者社区中有一个想法值得赞成：https://developercommunity.visualstudio.com/content/idea/351736/use-new-project-format-for-njsproj-files.html

Answer 1

您可以将其添加为项目设置中的预构建步骤，但我认为更好的方法是在 .csproj 文件中使用自定义目标。我正在使用 vue 而不是反应。这是我在我的 .csproj 中使用的，你可以做类似的事情。

  <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
  <Target Name="RunNpmBuild" Condition="'$(Configuration)' != 'ServerOnly'">
    <Exec Command="yarn" WorkingDirectory="./www" />
    <Exec Command="npm run build" WorkingDirectory="./www" />
  </Target>
  <Target Name="BeforeBuild" DependsOnTargets="RunNpmBuild">
  </Target>

请注意，我还有一个基于调试配置的名为“ServerOnly”的额外构建配置，这样我就可以 f5 只调试服务器，而无需运行纱线或我的 npm 构建。

Answer 2

另一种解决方法可能是将 package.json 上的脚本部分更改为

"scripts": {
    "start": "yarn react-scripts start"
     ...
}

将通过 Startup.cs 上的配置实现。

if (env.IsDevelopment())
{
    spa.UseReactDevelopmentServer(npmScript: "start");
}

Answer 3

React 和所有其他单页应用程序项目都是一样的。我有一个用 React 编写的 SPA，我在 csproj 文件中使用了它

        <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
        <!-- Ensure Node.js is installed -->
        <Exec Command="node --version" ContinueOnError="true">
          <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
        </Exec>
        <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
        <Message Importance="high" Text="Restoring dependencies using 'yarn'. This may take several minutes..." />
        <Exec WorkingDirectory="$(SpaRoot)" Command="yarn install" />
      </Target>
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="yarn install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="yarn build" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**; $(SpaRoot)build-ssr\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

如何让 Visual Studio 2017 调用 `yarn start`

How to make Visual Studio 2017 call the `yarn start`

visual-studio

react-scripts

yarnpkg

visual-studio-2017