Visual Studio 2017中的React項目

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. 添加/創建.NET項目，你通常會在Visual Studio。
3. 現在創建您的React項目。我使用Facebook的create-react-app實際生成我的React項目。這有很多非常好的內置功能，如Webpack，Jest（用於測試），yarn（用於軟件包管理）等。但是，這些細節對您來說是「隱藏的」，因此生成的項目看起來更簡單。如果你需要更多地控制構建/測試過程，你可以運行create-react-app eject命令執行。請注意，這是「單向」操作，因爲您無法將文件重新放回create-react-app。如果不明顯，您需要分別安裝node和yarn。

4. 既然你也想用打字稿你應該使用react-scripts-ts腳本像這樣：

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

   微軟已經通過here好走。

5. 棘手的部分是讓生成的React項目進入Visual Studio。我通過安裝隨Visual Studio安裝的「Visual Studio Installer」中的「Node.js開發」模塊來完成此任務。不幸的是，Microsoft似乎刪除了空白或空的TypeScript項目模板（請參閱here）。

6. 安裝Node.js工具後，您可以在解決方案中創建基於節點的項目。在文件 - >新建 - >項目... - >模板 - >其他語言 - > TypeScript左菜單導航中有幾個選項。我選擇了「Blank Node.js Web應用程序」。

7. 之後，您需要將通過create-react-app創建的React項目文件複製到Visual Studio項目中。我發現在Visual Studio中創建目錄更容易，因此它們被添加到項目文件中，然後複製生成的文件夾中的文件，最後將它們添加到Visual Studio中的項目文件夾中。

8. 此時，您可以運行由create-react-app添加的package.json文件中的腳本。我更喜歡在命令行運行這些命令，但也可以使用Mads Kristensen的「Task Runner Explorer」在Visual Studio中運行它們。

Answer 2

另一種可能性是在Visual Studio Code中使用react extension。這並不完全符合您的要求，但您的外觀和感覺與Visual Studio類似，並且完全支持React。