Visual Studio 2017 中的反应项目

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. 像往常一样在 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

   微软对here有很好的了解。

5. 棘手的部分是将生成的 React 项目导入 Visual Studio。我通过从随 Visual Studio 一起安装的“Visual Studio 安装程序”安装“Node.js 开发”模块来做到这一点。不幸的是，微软似乎已经删除了空白或空的 TypeScript 项目模板（参见here）。

6. 安装 Node.js 工具后，您可以在解决方案中创建基于节点的项目。在 File -> New -> Project... -> Templates -> Other Languages -> TypeScript 左侧菜单导航下有几个可供选择。我选择了“空白 Node.js Web 应用程序”。

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

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

Answer 2

另一种可能性是在Visual Studio Code 中使用react extension。这并不完全符合您的要求，但您会得到与 Visual Studio 相似的外观和对 React 的全面支持。

Answer 3

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

Answer 4

我在 VS 2017 中使用文章 (click here) 进行了此操作。在那里你会找到一个名为 Blank Node.js Web Application 的模板，请在此处找到它。

注意事项：

• 在 Visual Studio 2017 中，没有像 Angular 那样针对 React 的特定模板。

• 使用 cli (refer here) 和使用 Visual Studio 创建项目会有所不同。 Cli 创建的项目默认会在 node_modules 中加载所有模块，因此最初需要大约 132 MB，但如果您使用 Visual Studio 创建项目，它只会在 node_modules 中加载所需的模块，因此最初需要大约 75 MB。当您开始在生产中部署它时，这很重要。

希望对你有帮助！

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