web-dev-qa-db-fra.com

Type de projet JavaScript pour Visual Studio?

J'ai une tâche qui implique la création d'une bibliothèque JavaScript qui sera ensuite utilisée par plusieurs projets dans une solution Visual Studio. Idéalement, j'aimerais trouver un type de projet qui, pour mon code JavaScript, se comporterait comme s'il s'agissait d'une bibliothèque de classe C #, c'est-à-dire:

  • Il serait "compiler" (minify, vérifier par Closure, ...) le code JavaScript dans une sortie **. Fichier js *
  • Cette sortie pourrait être "référencée" par d'autres projets, par exemple. par un projet ASP.NET MVC
  • Je pourrais spécifier un "ordre de fabrication" de mes projets (fonctionnalité VS standard)

Est-ce possible avec VS 2010/11 ou dois-je écrire des fichiers BAT/PowerShell et en faire le script moi-même?

Question similaire mais légèrement différente: Modèle de projet Visual Studio pour JavaScript/VBScript?

javascriptvisual-studiovisual-studio-2010visual-studio-2015
49
Borek Bernard

Fort de mon expérience dans le développement de Asp.Net MVC, Visual Studio prend en charge JavaScript de manière limitée. Je suppose que vous pouvez faire quelque chose pour imiter le comportement que vous souhaitez:

  1. Créez un projet pour stocker vos fichiers JavaScript, peut-être un projet de bibliothèque de classes, cela n'a pas vraiment d'importance, tant qu'il prend en charge les événements de construction. Placez vos fichiers JavaScript dans un nouveau projet. 

  2. Créez une étape de post-génération sur ce projet afin de minimiser votre JavaScript à l'aide d'un outil externe. J'utilise YUI Compressor . Votre étape de post-génération doit contenir des lignes similaires à celles-ci:

    Java -jar $ Scripts\(ProjectDir)\yuicompressor-2.4.7.jar Scripts\(SolutionDir)\yourJsFile.js -o $ Scripts\(SolutionDir)\yourJsFile.min.js --charset utf-8

  3. Incluez ce nouveau projet dans votre solution. Ensuite, pour vos projets Asp.Net, configurez Active Server Pages de manière à ce qu'ils référencent les fichiers JavaScript. J'utilise par exemple la syntaxe Razor. Cependant, il peut être difficile de spécifier le chemin correct:

@if (@Model.IsDebug)
{
<script src="@Url.Content("~/Scripts/yourJsFile.js")"  type="text/javascript"> </script>
}
else
{
<script src="@Url.Content("~/Scripts/yourJsFile.min.js")"  type="text/javascript"></script>
}

Là encore, il peut être difficile de vous assurer que vous pouvez référencer avec précision les fichiers JavaScript de votre projet Asp.Net. Mais je suis sûr qu'il y a un moyen de le faire. Vous pouvez peut-être demander à votre étape de post-compilation de copier les fichiers JavaScript dans un emplacement commun. Si vous faites cela, vous voudrez également marquer l'événement de post-génération sur votre projet JavaScript comme "Toujours exécuter", afin que les fichiers JavaScript soient toujours copiés.

9
Bojin Li

Bonne question (+1). Ma décision a été de mettre tous les fichiers javascript généraux dans un projet javascript distinct et d'utiliser les fichiers liés vers les fichiers js nécessaires dans le projet web/mvc.

De cette façon, vous avez la possibilité d'utiliser le contrôle de subversion du côté projet javascript et de compacter et de fusionner les fichiers js du côté du projet général séparé en utilisant tous les outils disponibles.

7
Saulius

Je suis vraiment curieux à ce sujet! S'il vous plaît @ commentez-moi si quelqu'un propose d'autres idées ou de meilleures idées. 

Option 1: projet Web ASP.NET avec Web Essentials

Si vous voulez juste un projet javascript front-end, c'est une option facile. Web Essentials est facile à utiliser et à installer dans Visual Studio. Vous pouvez l'utiliser pour une minification facile. Ensuite, vous pouvez utiliser Qunit pour les tests. C'est un point d'entrée assez facile et léger dans le développement javascript côté client.

Option 2: Outils Node.js pour Visual Studio

Utilisez Outils Node.js pour Visual Studio . Il vous donnera des modèles de projet pour beaucoup de ces bonnes choses. Vous ne pouvez pas finir par utiliser node.js, surtout si vous créez simplement une bibliothèque js côté client, mais avoir node.js est utile pour les tests et vous voudrez/aurez besoin de npm pour installer toutes les autres choses mentionnées dans ma réponse originale ( Option 3).

Il y a beaucoup de configuration impliquée avec celui-ci. Cela peut constituer un obstacle à l’entrée pour certains développeurs .NET.

Option 3: Projet de site Web

Voici ce que j'ai fait dans le passé:

 enter image description here

J'ai effectivement créé ce projet dans Eclipse! (Ne me déteste pas). Plus tard, j'ai créé une solution Visual Studio avec un projet de site Web . J'ai installé node.js, ce qui n'est certainement pas nécessaire, mais je l'utilisais comme serveur Web léger.

Ensuite, vous pouvez utiliser Nuget ou Bower pour installer d’autres choses telles que:

  1. require.js pour la gestion des modules
  2. jasmine pour les tests unitaires
  3. grunt ou gulp pour les constructions (minification)
  4. Vous pouvez installer jslint ou jshint pour corriger le code.

Toutes ces choses ne sont pas nécessaires. Je pense que Bower est intégré à Visual Studio 2015. Certains d'entre eux nécessiteront des versions en ligne de commande, mais il y a très peu de commandes à exécuter une fois que vous l'avez configuré.

3
Jess

Si vous souhaitez accéder à pre-build/pos-build (inutile dans l’explorateur de tâches), créez un projet ASP.net Core vide (le dossier node_modules sera masqué et les fichiers seront automatiquement placés dans le projet (en les copiant simplement). MAIS, ceci génère un dossier obj et bin, ce qui peut être gênant.Le bon point ici est que si vous générez votre projet dans le dossier www, vous pouvez utiliser la commande de publication de Visual Studio.

Si vous ne vous souciez de rien de ce qui précède, un projet C # partagé ne génère pas de sortie. C'est donc un bon modèle pour créer un projet javascript (je l'utilise pour tous mes projets vue spa). L'inconvénient est que l'imbrication des fichiers ne fonctionnera pas = \ 

0
JCKödel