Réagir projet dans Visual Studio 2017

Je veux développer un Réagir application dans Visual Studio 2017 côtés de mon .NET application (dans la même solution).

Je suis à l'aide de la Machine, donc je veux d'un type de projet où je peux personnaliser le build (je veux webpack le projet, etc, de sorte que le standard de Visual Studio Tapuscrit de construire n'est pas assez).

J'ai installé le node.js outils de développement mais ils ne me permettent de créer node.js des projets spécifiques (qui exécutent un node.js exemple lorsqu'il est lancé) et ne me laissez pas personnaliser le processus de construction.

Type de projet qui sera le mieux pour cela?

InformationsquelleAutor James Monger | 2017-04-27
  1. 50

    Que j'ai fait récemment, et recommandons ce qui suit:

    1. Créer un "Vide" du projet de solution dans Visual Studio 2017.
    2. Ajouter/créer votre .Un projet de réseau comme vous le feriez normalement dans Visual Studio.
    3. Maintenant créer votre projet React. J'ai utilisé le créer-réagir-app de Facebook réellement générer mon Réagir projet. Cela a vraiment un bon construits dans les caractéristiques telles que Webpack, Plaisanterie (pour les tests), laine (pour la gestion des paquets), etc. Cependant, ces détails sont "cachés" de vous pour que le projet a l'air beaucoup plus simple. Si vous ne besoin de plus de contrôle sur la construction/processus de test, vous pouvez exécuter le create-react-app eject de commande. Soyez avisé que c'est un "one-way" opération que vous ne pouvez pas mettre les fichiers de nouveau à create-react-app. Vous aurez besoin d'installer nœud et fil séparément, si ce n'était pas évident.

    4. Puisque vous aussi vous voulez utiliser la Machine, vous devez utiliser le réagir-scripts-ts script comme ceci:

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

      Microsoft a une bonne marche à travers ici.

    5. La partie la plus délicate est d'avoir généré Réagir de projet dans Visual Studio. Je l'ai fait en installant le "Node.js développement du module" de la "Visual Studio Installer" qui est installé avec Visual Studio. Malheureusement, Microsoft semble avoir supprimé le vide ou vide Tapuscrit modèle de projet (voir ici).

    6. Une fois l'Node.js les outils sont installés, vous pouvez créer un nœud de base de votre projet dans la solution. Il ya plusieurs choix sous la Fichier -> New -> Projet... -> Modèles -> d'Autres Langues -> texte dactylographié à gauche du menu de navigation. J'ai choisi "la Vierge Node.js l'Application Web".

    7. Après cela, vous aurez besoin de copier sur le projet React fichiers créés par create-react-app dans votre projet Visual Studio. Je trouve plus facile de créer des répertoires dans Visual Studio, donc ils sont ajoutés au fichier de projet, puis copiez les fichiers dossiers générés, et enfin de les ajouter dans le dossier du projet dans Visual Studio.

    8. À ce stade, vous pouvez exécuter les scripts dans le package.json de fichiers qui ont été ajoutés par create-react-app. Je préfère pour l'exécution de ces à la ligne de commande, mais vous pouvez les exécuter dans Visual Studio à l'aide de la "Task Runner Explorer" par Mads Kristensen.

    • Je suis juste tremper mes pieds dans l'ici, mais il semble comme si, à l'étape 5, vous pouvez choisir "De l'Existant Node.js code", puis sélectionnez le répertoire que vous avez fait à l'étape 4 créez-réagir-app. Il utilise ce répertoire directement, et des lieux tout .la sln et .proj-y les fichiers.
    • Je vais l'ajouter après quand est prêt à déployer à la production, exécutez la commande "npm run build" et de se déplacer à la racine du contenu. Vous n'aurez pas besoin de recommencer un autre serveur/port.
    • La réaction-scripts-ts paquet est obsolète. Tapuscrit est désormais pris en charge en mode natif dans la création de Réagir App. Vous pouvez utiliser l'option --tapuscrit option au lieu de cela lors de la génération de votre application pour y inclure Tapuscrit de soutien. Aimeriez-vous vous continuer à l'aide de réagir-scripts-ts?
    InformationsquelleAutor Henry Daehnke
  2. 2

    Une autre possibilité est d'utiliser le réagir extension dans Le Code De Visual Studio. Ce n'est pas exactement ce que vous avez demandé, mais vous obtenez un look and feel similaire à Visual studio et plein de Réagir de soutien.

    • Ce n'est vraiment pas une mauvaise idée. Vous pouvez garder la Réagir répertoire de l'application, en vertu de la même solution répertoire/repo Git comme votre VS17 projets. Avec plusieurs moniteurs, vous pouvez avoir une IDE dans chaque. Sur une base purement esthétique, la légèreté VS Code sent plus approprié pour JS/TS de développement web, avec npm/fils/réagir ligne de commande de la manipulation de la construit.
    InformationsquelleAutor user1934212