Visual Studio 2017 中的 React 项目

Question

我希望在Visual Studio 2017中开发React应用程序，与我的.NET应用程序（在同一解决方案中）并行。

我正在使用TypeScript，因此希望有一种项目类型可以自定义构建（我想要webpack该项目等），因此标准的Visual Studio TypeScript构建不足够。

我已安装node.js开发人员工具，但它们只允许我创建特定于node.js的项目（启动时运行node.js实例），而不允许我自定义构建过程。

哪种项目类型最适合？

- James Monger

---

我使用默认的ASP MVC项目来进行这种设置。 - Lojka

https://marketplace.visualstudio.com/items?itemName=KonstantinTarkus.ReactjsStarterKit - Ken Tucker

@KenTucker，那个模板在VS2017中不起作用。 - Marc L.

Answer 1

我最近尝试了以下步骤，建议如下：

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

4. 由于您还想使用TypeScript，因此应该像这样使用react-scripts-ts脚本：

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

   Microsoft在这里有一个很好的演练。

5. 棘手的部分是将生成的React项目放入Visual Studio中。 我通过从安装在Visual Studio中的“Visual Studio Installer”的“Node.js开发”模块进行了安装来实现此目的。不幸的是，Microsoft似乎已经删除了空的TypeScript项目模板（见此处）。

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

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

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

- Henry Daehnke

---

我尝试涉足此处，但看起来在第5步中，您可以选择“从现有的 Node.js 代码”并选择您在第4步中使用 create-react-app 创建的目录。它会直接使用该目录并将任何 .sln 和 .proj 文件放置在那里。 - n daniel

当准备好部署到生产环境后，我会添加“after”- 运行命令“npm run build”，并移动到内容的根目录。您不需要再启动另一个服务器/端口。 - Ivan Paniagua

react-scripts-ts包已经被弃用。Create React App现在原生支持TypeScript。您可以在生成应用程序时使用--typescript选项，以包括对TypeScript的支持。您想继续使用react-scripts-ts吗？ - Muhammad Adnan

Answer 2

另一种可能是在Visual Studio Code中使用React扩展。虽然这不完全是你所要求的，但你可以获得类似于Visual Studio的外观和感觉以及完整的React支持。

- Oblomov

---

这真的不是一个坏主意。您可以将React应用程序目录保留在与VS17项目相同的解决方案目录/Git存储库下。使用多个监视器，您可以在每个监视器上拥有一个IDE。从纯美学角度来看，轻量级的VS Code只是感觉更适合JS/TS Web开发，npm/yarn/react命令行处理构建。 - Marc L.

Answer 3

我用VS 2017使用了文章 (点击这里) 中的方法。在那里，您会找到一个名为空白Node.js Web应用程序的模板，请在此处查找 。

几个需要知道的好点:

• 在Visual Studio 2017中，与Angular一样，并没有专门针对React的模板。

• 如果使用cli (请参阅此处) 和Visual Studio创建项目，则存在差异。cli创建的项目默认加载node_modules中的所有模块，因此最初需要约132MB，但是，如果使用Visual Studio创建项目，则仅加载所需的模块，因此最初只需要约75MB。当您开始将其部署到生产中时，这很重要。

希望它能帮助您！

免责声明：它始终取决于要求。

- MAQ

Answer 4

我看到有人建议通过右键单击解决方案并选择“添加->现有网站”来添加包含React项目的文件夹，然后从“BUILD->配置管理器”中排除它以避免构建。

- saner