在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. 创建一个＆＃34;空白＆＃34; Visual Studio 2017中的解决方案项目。
2. 像在Visual Studio中一样添加/创建.NET项目。
3. 现在创建您的React项目。我使用Facebook的create-react-app来实际生成我的React项目。这有很多非常好的内置功能，如Webpack，Jest（用于测试），纱线（用于包管理）等。但是，这些细节是隐藏的＆＃34;从你这里生成的项目看起来更简单。如果执行需要对构建/测试过程进行更多控制，则可以运行create-react-app eject命令。请注意，这是一个单向的＆＃34;尽可能将文件重新放入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。我通过安装＆＃34; Node.js开发＆＃34;来自＆＃34; Visual Studio Installer＆＃34;的模块随Visual Studio一起安装。不幸的是，Microsoft似乎已经删除了空白或空的TypeScript项目模板（请参阅here）。

6. 安装Node.js工具后，您可以在解决方案中创建基于节点的项目。 File下有几个可供选择 - ＆gt;新 - ＆gt;项目...... - ＆gt;模板 - ＆gt;其他语言 - ＆gt; TypeScript左侧菜单导航。我选择了＆＃34; Blank Node.js Web Application＆＃34;。

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

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

Answer 2

另一种可能性是使用react extension中的Visual Studio Code。这不是你要求的，但你看起来和感觉类似于Visual Studio和完整的React支持。

Answer 3

我在VS 2017中使用文章（click here）做到了这一点。在那里，您会找到一个名为空白Node.js Web应用程序的模板，请在此处找到。

很少知道的要点：

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

• 如果使用cli（refer here）和Visual Studio创建项目，则有所不同。 Cli创建的项目默认情况下会在node_modules中加载所有模块，因此最初占用约132 MB，但是如果使用Visual Studio创建项目，则它仅会在node_modules中加载所需的模块，因此最初约占75 MB。当您开始将其部署到生产中时，这一点很重要。

希望对您有帮助！

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

Answer 4

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