Utilisation de Parcel.js dans une application ASP.NET Core

Parcel.js est un «groupeur d’applications Web extrêmement rapide et à configuration zéro». Dans cet article, nous allons prendre un modèle de site Web ASP.NET Core qui utilise Bootstrap 4 et le configure pour utiliser les ensembles générés par colis.

ASP.NET Core prend en charge le regroupement et la minimisation des actifs statiques au moment de la conception, à l'aide du package BuildBundlerMinifier pris en charge par la communauté, qui peut être configuré dans un fichier bundleconfig.json. Cependant, il n'est pas bien adapté aux scénarios qui pourraient bénéficier d'une stratégie de regroupement au moment du déploiement, c'est-à-dire que les actifs sont construits pendant le déploiement et que les fichiers de sortie ne sont pas archivés.

C'est ici qu'intervient Parcel.js. , bundle d’application Web à configuration zéro. ”Le bit de configuration zéro est son principal argument de vente car il vous permet de démarrer avec un minimum d’effort.

Dans cet article, nous allons prendre un modèle de site Web ASP.NET qui utilise Démarrez 4 et configurez-le pour utiliser à la place les ensembles générés par Parcel.

Créer et configurer un nouveau projet ASP.NET

1. Créez un projet Web utilisant Razor Pages. Pour ce faire sur la ligne de commande, exécutez:
   dotnet new webapp --name AspNetParcelExp cd AspNetParcelExp
2. Supprimez les dossiers sous wwwroot. (Vous pourrez le supprimer ultérieurement si vous le souhaitez, notre objectif est de générer ces fichiers à l'aide de Parcel et de les utiliser à la place.)
   Installez npm Dependencies
3. Ajoutez un fichier package.json à la racine du projet, comme

 	 {
   "name" :   "aspnet-parcel-exp" 
   "privé" :   true [19659012] "version" :   "0.1.0" 
} 

2. Ajouter un bundle-bundler en tant que dépendance de dev:

 javascriptnpm install --save-dev un paquet-bundler @ 1 [19659026] Installez les bibliothèques supprimées à l’aide de npm: 
    
 npm install jquery @ 3
npm install popper.js@1
npm installer bootstrap @ 4
npm install jquery-validation @ 1
npm install jquery-validation-unobtrusive @ 3 
 Si tout se passe bien, votre package.json devrait ressembler à ceci:
 {
   "name" :   "aspnet-parcel-exp "
  " private ":   true 
  " version ":  " 0.1.0 "
  " devDependencies ":   {
    " Paquetage ":  " ^ 1.11.0 "
  } 
  " dépendances ":   ] {
     "bootstrap" :   "^ 4.2.1" 
     "jQuery" :   "^ 3.3.1" [19659045] "jquery-validation" :   "^ 1.19.0" 
     "jQuery-validation-notobtrusive" :   "^ 3.2.11" 
     "popper.js" :   "^ 1.14.7" 
  } 
} 

Configuration d'un ensemble d'actifs à l'aide de Parcel.js

1. Sous la racine du projet, créez fichiers ayant la structure suivante:

 	 / AspNetParcelExp / # project r oot
  - configuration .sassrc # sass
  - assets / # actifs frontaux root
    - scss / # Place pour tous les styles
      - site.scss
    - js / # Place pour tous les scripts
      - site.js
    - bundle.js # Point d’entrée pour notre groupe de sortie

2. Le fichier bundle.js sert de point d’entrée pour le group-bundler. Ajoutez le code suivant à bundle.js:

 // Import styles
importer './scss/site.scss'

// Setup jquery
importer $ depuis 'jquery'
fenêtre. $ = window.jQuery = $

// Importer d'autres scripts
importer 'bootstrap'
importer 'jquery-validation'
importer 'jquery-validation-unobtrusive'

importer './js/site'

Nous importons tout ce dont nous dépendons. Par exemple, ‘bootstrap’ fait référence au dossier… / node_modules / bootstrap /. Si vous souhaitez importer un fichier spécifique à partir d'un package uniquement, vous pouvez également le faire. Le code ci-dessus devrait être simple, sauf peut-être jQuery, que je vais expliquer un peu plus tard.

3. Ajoutez ce qui suit à .sassrc:

 	 {
  "includePaths": [
    "./node_modules/"
  ]
}

Cela permettra de référencer les dossiers de paquets sans chemin complet. Pour plus d'informations, voir colis-bundler / parcelle 39.

4. Ajoutez le code suivant à site.scss:

 	 @import "~ bootstrap / scss / bootstrap";

Vous pouvez également simplement inclure les fichiers SCSS d'amorçage dont vous avez réellement besoin pour conserver une taille de sortie réduite. Puisque nous essayons de reproduire le modèle, nous pourrions également coller le code dans le fichier original site.css du modèle original après la ligne.

5. Comme nous n’avons aucun script global, nous laissons le fichier site.js vide pour le moment. 19659087] Ajoutez un bloc de scripts au fichier package.json juste avant les devDependencies: {line:

 	 "scripts": {
  "build": "parcel build assets / bundle.js --out-dir wwwroot / dist /",
  "watch": "parcelle watch assets / bundle.js --out-dir wwwroot / dist /"
}, 

Ceci ajoute des scripts qui peuvent être appelés en tant que npm exécutent build pour construire, par exemple. Il passe le point d'entrée bundle.js à Parcel et lui demande de générer les fichiers de sortie dans le répertoire wwwroot / dist / à l'aide de l'option --out-dir.

7. Nous construisons maintenant notre ensemble:

 npm run build [19659028] Vous devriez maintenant voir un fichier bundle.css, bundle.js et un fichier bundle.map dans le répertoire wwwroot / dist (le répertoire que nous avons spécifié pour le script de construction ci-dessus). C’est une bonne idée d’ignorer le wwwroot / dist du contrôle de version. 




  


               

8. Nous devons mettre à jour toutes les références aux anciens fichiers avec les nouveaux. Supprimez toutes les balises de script dans _Layout.cshtml et _ValidationScriptsPartial et ajoutez ce qui suit dans _Layout.cshtml:

 	 < script   src  =  " ~ / dist / bundle.js  " 
         asp-append-version  = "  true  " >  </  script > 
 	 ] Et remplacez la feuille de style  < link >   avec le tag:
  < link   rel  =  " feuille de style "  
       href  =  " ~ / dist / bundle.css "  
       asp-append-version  =  " true "    /> 

C’est tout. Si vous avez tout fait correctement, le programme devrait afficher le même résultat que pour les anciens fichiers.

Si vous avez l'impression de travailler beaucoup, c'est probablement parce que vous n'êtes pas familier avec npm, SCSS, etc. prenez votre temps.

Voir les modifications

Plutôt que d’exécuter npm run build à chaque fois que vous apportez des modifications, vous pouvez utiliser HMR (Hot Module Replacement), qui détectera les pages et les rechargera pour vous

Ouvrez une nouvelle instance de terminal et exécutez npm run watch. Continuez à utiliser cette fonction lorsque vous effectuez des modifications de développement - cela vous accélérera.

Ajouter une tâche de pré-publication

Ajoutez ce qui suit au fichier AspNetParcelExp.csproj juste avant la balise de fermeture

 :

  

Maintenant, chaque fois que vous créez un paquet de publication, le script de construction npm est exécuté. Ceci est particulièrement important dans les scénarios de livraison continue, car wwwroot / dist n'est (généralement) pas sous contrôle de version, et l'environnement de génération doit générer les fichiers avant le déploiement. Vous pouvez tester cette étape à l'aide de la publication .net: vous verrez la sortie de bundle-paquet.

Si vous souhaitez que la tâche soit exécutée à chaque fois que le projet est généré, remplacez PrepareForPublish par BeforeBuild.

Remarque sur CommonJS Modules

L'éditeur de paquet-paquet génère un module CommonJS, ce qui signifie qu'il ne pollue pas l'objet de fenêtre global. Cela peut parfois poser problème, car certaines bibliothèques, en particulier les anciennes, ont toujours été une fenêtre polluante.

Prenez jQuery, par exemple. Les bibliothèques qui requièrent jQuery effectuent un test sur l’objet window pour vérifier s’il possède une propriété jQuery ou $. Comme les bibliothèques CommonJS ne polluent pas la fenêtre, ces vérifications échoueront. Nous devrons donc manuellement polluer l’objet window nous-mêmes. Nous l'avons fait pour jquery dans bundle.js en utilisant:

 import $ from 'jquery'
window. $ = window.jQuery = $ 

C’est une chose à ne pas oublier lors de l’utilisation de Parcel.js ou d’autres bundles similaires.

Quelques indications et idées

• Vous pouvez également configurer les navigateurs de votre choix. support en ajoutant un fichier .browserslistrc.
• Vous pouvez créer plusieurs ensembles si vous le souhaitez. Dans notre exemple, nous plaçons tous les scripts dans un seul fichier, mais vous pouvez également configurer les scripts de validation dans un fichier séparé.