Javascript 在 Visual Studio 2017 中反应项目

React project in Visual Studio 2017

提问by James Monger

I want to develop a React application in Visual Studio 2017 alongside my .NET application (in the same solution).

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

I am using TypeScript, so I want a project type where I can customise the build (I want to webpack the project, etc, so the standard Visual Studio TypeScript build is not enough).

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

I have installed the node.js developer toolsbut they only allow me to create node.js specific projects (which run a node.js instance when started) and do not let me customise the build process.

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

Which project type will be best for this?

哪种项目类型最适合这种情况？

回答by Henry Daehnke

I recently did this and would recommend the following:

我最近这样做了，并会推荐以下内容：

1. Create a "Blank" solution project in Visual Studio 2017.
2. Add/create your .NET project as you would normally in Visual Studio.
3. Now create your React project. I used the create-react-appfrom Facebook to actually generate my React project. This has a lot of really good built in features such as Webpack, Jest (for testing), yarn (for package management), etc. However, these details are "hidden" from you so the generated project looks much simpler. If you doneed more control over the build/testing process you can run the create-react-app ejectcommand. Be advised that this is a "one-way" operation as you can't put the files back in to create-react-app. You will need to install nodeand yarnseparately, if that wasn't obvious.

4. Since you also want to use TypeScript you should use the react-scripts-tsscript like so:

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

   Microsoft has a good walk through here.

5. The tricky part is getting the generated React project into Visual Studio. I did this by installing the "Node.js development" module from the "Visual Studio Installer" that gets installed with Visual Studio. Unfortunately, Microsoft seems to have removed the blank or empty TypeScript project template (see here).

6. Once the Node.js tools are installed you can create a node based project in your solution. There are several to choose from under the File -> New -> Project... -> Templates -> Other Languages -> TypeScript left menu navigation. I chose "Blank Node.js Web Application".

7. After that you will need to copy over the React project files created by create-react-appinto your Visual Studio project. I find it easier to create the directories in Visual Studio so they are added to the project file, then copy the files the generated folders, and finally add them to the project folder in Visual Studio.

8. At this point you can run the scripts in the package.jsonfile that were added by create-react-app. I prefer to run these at the command line, but you can run them in Visual Studio as well using the "Task Runner Explorer" by Mads Kristensen.

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. 由于您还想使用 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 工具，您就可以在您的解决方案中创建一个基于节点的项目。在 File -> New -> Project... -> Templates -> Other Languages -> TypeScript 左侧菜单导航下有几个可供选择。我选择了“空白 Node.js Web 应用程序”。

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

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

回答by user1934212

Another possibility is to use the react extensionin Visual Studio Code. That's not exactly what you asked for, but you get a look and feel similar to Visual studio and full React support.

另一种可能性是在Visual Studio Code 中使用react 扩展。这并不完全是您所要求的，但您会获得与 Visual Studio 相似的外观和完整的 React 支持。

回答by eriksan

I've seen people recommend adding the folder containing your React project by right-clicking on the solution and "Add -> Existing Web Site", then excluding it from the build from "BUILD -> Configuration Manager".

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