在Visual Studio 2017中反应项目

Question

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

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

我已经安装了node.js开发人员工具,但是他们只允许我创建node.js特定项目(在启动时运行node.js实例)并且不允许我自定义构建过程.

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

Answer 1

我最近这样做了,并会推荐以下内容:

1. 在Visual Studio 2017中创建"空白"解决方案项目.
2. 像在Visual Studio中一样添加/创建.NET项目.
3. 现在创建您的React项目.我使用Facebook 的create-react-app来实际生成我的React项目.这有很多非常好的内置功能,如Webpack,Jest(用于测试),纱线(用于包管理)等.但是,这些细节是"隐藏"的,因此生成的项目看起来更简单.如果确实需要对构建/测试过程进行更多控制,则可以运行该create-react-app eject命令.请注意,这是一种"单向"操作,因为您无法将文件重新放入create-react-app.如果不明显,您将需要单独安装节点和纱线.

4. 既然你也想使用TypeScript,你应该使用react-scripts-ts脚本,如下所示:

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

   微软在这里有一个很好的步骤.

5. 棘手的部分是将生成的React项目放入Visual Studio中.我通过安装Visual Studio安装程序"Visual Studio安装程序"中的"Node.js开发"模块来完成此操作.不幸的是,微软似乎已经删除了空白或空的TypeScript项目模板(见这里).

6. 安装Node.js工具后,您可以在解决方案中创建基于节点的项目.在文件 - >新建 - >项目... - >模板 - >其他语言 - > TypeScript左侧菜单导航下有几种可供选择.我选择了"Blank Node.js Web Application".

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

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