Visual Studio 2017中的React项目

Question

我想在Visual Studio 2017中与我的.NET应用程序（在同一解决方案中）一起开发React应用程序。

我正在使用TypeScript，所以我想要一个项目类型，我可以自定义构建（我想webpack项目等，所以标准的Visual Studio TypeScript构建是不够的）。

我已经安装了node.js developer tools，但它们只允许我创建node.js特定项目（启动时运行node.js实例），并且不要让我自定义构建过程。

哪个项目类型最适合这个？

Answer 1

我最近做了这一点，并建议如下：

1. 在Visual Studio中创建一个“空白”解决方案项目2017
2. 添加/创建.NET项目，你通常会在Visual Studio。
3. 现在创建您的React项目。我使用Facebook的create-react-app实际生成我的React项目。这有很多非常好的内置功能，如Webpack，Jest（用于测试），yarn（用于软件包管理）等。但是，这些细节对您来说是“隐藏的”，因此生成的项目看起来更简单。如果你需要更多地控制构建/测试过程，你可以运行create-react-app eject命令执行。请注意，这是“单向”操作，因为您无法将文件重新放回create-react-app。如果不明显，您需要分别安装node和yarn。

4. 既然你也想用打字稿你应该使用react-scripts-ts脚本像这样：

   create-react-app my-app --scripts-version=react-scripts-ts

   微软已经通过here好走。

5. 棘手的部分是让生成的React项目进入Visual Studio。我通过安装随Visual Studio安装的“Visual Studio Installer”中的“Node.js开发”模块来完成此任务。不幸的是，Microsoft似乎删除了空白或空的TypeScript项目模板（请参阅here）。

6. 安装Node.js工具后，您可以在解决方案中创建基于节点的项目。在文件 - >新建 - >项目... - >模板 - >其他语言 - > TypeScript左菜单导航中有几个选项。我选择了“Blank Node.js Web应用程序”。

7. 之后，您需要将通过create-react-app创建的React项目文件复制到Visual Studio项目中。我发现在Visual Studio中创建目录更容易，因此它们被添加到项目文件中，然后复制生成的文件夹中的文件，最后将它们添加到Visual Studio中的项目文件夹中。

8. 此时，您可以运行由create-react-app添加的package.json文件中的脚本。我更喜欢在命令行运行这些命令，但也可以使用Mads Kristensen的“Task Runner Explorer”在Visual Studio中运行它们。

Answer 2

另一种可能性是在Visual Studio Code中使用react extension。这并不完全符合您的要求，但您的外观和感觉与Visual Studio类似，并且完全支持React。