Vyhledávání na webu

javascript - React projekt ve Visual Studio 2017

Chci vyvinout aplikaci v Reactu ve Visual Studio 2017 společně s mou aplikací .NET (ve stejném řešení).

Používám TypeScript, takže chci typ projektu, kde mohu přizpůsobit sestavení (chci projekt zabalit pomocí webpacku atd., takže standardní sestavení TypeScriptu ve Visual Studiu nestačí).

Nainstaloval jsem nástroje pro vývojáře node.js, ale dovolují mi pouze vytvářet projekty specifické pro node.js (které spustí instanci node.js při startu) a neumožňují mi přizpůsobit proces sestavování.

Který typ projektu bude pro toto nejlepší?

Odpověď č. 1

Nedávno jsem to udělal a doporučil bych následující:

  1. Vytvořte projekt řešení „Prázdný“ ve Visual Studiu 2017.
  2. Přidejte/vytvořte svůj projekt .NET tak, jak byste normálně dělali ve Visual Studio.
  3. Nyní vytvořte svůj projekt React. K vytvoření svého projektu React jsem použil create-react-app od Facebooku. Tento nástroj má mnoho opravdu dobrých vestavěných funkcí, jako je Webpack, Jest (pro testování), yarn (pro správu balíčků) atd. Tyto detaily jsou však od vás „skryté“, takže generovaný projekt vypadá mnohem jednodušeji. Pokud však opravdu potřebujete větší kontrolu nad procesem sestavení/testování, můžete spustit příkaz create-react-app eject. Mějte na paměti, že se jedná o „jednosměrnou“ operaci, protože soubory nelze vrátit zpět do create-react-app. Budete také muset nainstalovat node a yarn samostatně, pokud to nebylo zřejmé.

  4. Jelikož chcete také používat TypeScript, měli byste použít skript react-scripts-ts následujícím způsobem:

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

    Microsoft má zde dobrý průvodce.

  5. Nejtěžší částí je dostat vygenerovaný projekt React do Visual Studia. Udělal jsem to instalací modulu „Vývoj Node.js“ z „Instalátoru Visual Studia“, který se nainstaluje spolu s Visual Studiem. Bohužel se zdá, že Microsoft odstranil šablonu prázdného nebo empty TypeScript projektu (viz zde).

  6. Jakmile jsou nainstalovány nástroje Node.js, můžete ve svém řešení vytvořit projekt založený na node. Existuje několik možností, ze kterých si můžete vybrat pod Nabídka Soubor -> Nový -> Projekt... -> Šablony -> Ostatní jazyky -> TypeScript v levé navigační nabídce. Já jsem si vybral "Prázdnou webovou aplikaci Node.js".

  7. Poté bude potřeba zkopírovat soubory projektu React vytvořené pomocí create-react-app do vašeho projektu ve Visual Studiu. Osobně mi přijde jednodušší nejprve vytvořit adresáře ve Visual Studiu, aby byly přidány do souboru projektu, poté zkopírovat soubory do vygenerovaných složek a nakonec je přidat do složky projektu ve Visual Studiu.

  8. V tomto okamžiku můžete spustit skripty v souboru package.json, které byly přidány pomocí create-react-app. Já osobně je spouštím příkazovým řádkem, ale můžete je spustit i ve Visual Studiu pomocí "Task Runner Explorer" od Madse Kristensena.

Odpověď č. 2

Další možností je použít rozšíření React ve Visual Studio Code. Není to přesně to, o co jste žádali, ale získáte vzhled a pocit podobný Visual Studiu a plnou podporu Reactu.

Související články