問題描述
我想在 Visual Studio 2017 中與我的 .NET 應用程序一起開發一個 React 應用程序(在同一個解決方案中).
我正在使用 TypeScript,所以我想要一個可以自定義構建的項目類型(我想對項目進行 webpack 等,所以標準的 Visual Studio TypeScript 構建是不夠的).
我已經安裝了 node.js 開發工具,但它們只允許我創建 node.js 特定項目(啟動時運行 node.js 實例)并且不要讓我自定義構建過程.
哪種項目類型最適合這個?
我最近做了這個,建議如下:
- 在 Visual Studio 2017 中創建一個空白"解決方案項目.
- 像往常一樣在 Visual Studio 中添加/創建 .NET 項目.
- 現在創建您的 React 項目.我使用 Facebook 的 create-react-app 來實際生成我的 React 項目.這有很多非常好的內置功能,例如 Webpack、Jest(用于測試)、yarn(用于包管理)等.但是,這些細節對您是隱藏的",因此生成的項目看起來要簡單得多.如果您確實需要對構建/測試過程進行更多控制,您可以運行
create-react-appject
命令.請注意,這是一個單向"操作,因為您無法將文件放回create-react-app
.您需要安裝 node 和 紗線,如果不明顯的話. 既然你也想使用 TypeScript,你應該使用 react-scripts-ts 腳本如下:
create-react-app my-app --scripts-version=react-scripts-ts
微軟在這里有很好的了解..p>
棘手的部分是將生成的 React 項目導入 Visual Studio.我通過從隨 Visual Studio 一起安裝的Visual Studio 安裝程序"安裝Node.js 開發"模塊來做到這一點.不幸的是,微軟似乎已經刪除了空白或空的 TypeScript 項目模板(請參閱此處).
安裝 Node.js 工具后,您可以在解決方案中創建基于節點的項目.在 File -> New -> Project... -> Templates -> Other Languages -> TypeScript 左側菜單導航下有幾個可供選擇.我選擇了空白 Node.js Web 應用程序".
之后,您需要將
create-react-app
創建的 React 項目文件復制到您的 Visual Studio 項目中.我發現在 Visual Studio 中創建目錄更容易,因此將它們添加到項目文件中,然后將文件復制到生成的文件夾中,最后將它們添加到 Visual Studio 中的項目文件夾中.此時,您可以運行
create-react-app
添加的package.json
文件中的腳本.我更喜歡在命令行中運行它們,但您也可以在 Visual Studio 中運行它們,也可以使用 Mads Kristensen 的Task Runner Explorer".
I want to develop a React application in Visual Studio 2017 alongside my .NET application (in the same solution).
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).
I have installed the node.js developer tools but 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.
Which project type will be best for this?
I recently did this and would recommend the following:
- Create a "Blank" solution project in Visual Studio 2017.
- Add/create your .NET project as you would normally in Visual Studio.
- Now create your React project. I used the create-react-app from 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 do need more control over the build/testing process you can run the
create-react-app eject
command. Be advised that this is a "one-way" operation as you can't put the files back in tocreate-react-app
. You will need to install node and yarn separately, if that wasn't obvious. Since you also want to use TypeScript you should use the react-scripts-ts script like so:
create-react-app my-app --scripts-version=react-scripts-ts
Microsoft has a good walk through here.
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).
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".
After that you will need to copy over the React project files created by
create-react-app
into 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.At this point you can run the scripts in the
package.json
file that were added bycreate-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.
這篇關于Visual Studio 2017 中的反應項目的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持html5模板網!