Comment activer Webpack sur votre projet Episerver

Si vous créez des applications Web modernes, vous devez examiner attentivement la pile technologique frontale que vous utilisez. Webpack, un bundler de modules statiques, combiné avec NPM pour la gestion des packages est un excellent point de départ. Voici comment vous pouvez incorporer ces technologies dans votre application Asp.net MVC basée sur Episerver.

Parallèlement à Node.js, nous devons également installer node-sass pour que nous puissions compiler les fichiers scss.

Voici comment vous peut facilement le faire dans le projet Alloy Demo.

Nous devons d'abord créer ces trois fichiers: webpack.config.js package.json et babel.config. json et placez-le dans le dossier / Static :

• webpack.config.js – c'est le fichier de configuration du pack Web dans lequel nous définissons le point d'entrée, les chargeurs et les bibliothèques.
• package.json – Configurations de construction / exécution et bibliothèques utilisées.
• babel.config.json – fichier de configuration pour les options Babel JS, dans ce cas, nous configurons la version à utiliser dans le projet.

Créez le fichier app.js et placez-le dans le dossier / Static / js :

• app.js – c'est le principal Fichier JS, point d'entrée pour tous les scripts.

Créez deux dossiers (vides pour l'instant) sous le dossier / Static : dist and scss . [19659002]

Modifiez et ajoutez ces lignes au webpack.config.js .

 const path = require ('path');
const fs = require ("fs");
const webpack = require ("webpack");
const {CleanWebpackPlugin} = require ('clean-webpack-plugin');

module.exports = {
    entrée: './js/app.js',
    production: {
        chemin: path.resolve (__ dirname, './dist'),
        nom de fichier: 'alliage.bundle.js'
    },
    // watch: true, // cette ligne activera watcher pour les changements js et scss (temps réel)
    module: {
        règles: [
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /.scss$/,
                utiliser: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /.js$/,
                exclure: / (node_modules | bower_components) /,
                utiliser: ["babel-loader"]
            },
            {
                test: /.(eot|gif|otf|png|svg|ttf|woff)(?v=[19459072[0-9],.
                utiliser: ['file-loader']
            }
        ]
    },
    Statistiques: {
        couleurs: vrai
    },
    devtool: 'source-map',
    plugins: [
        new CleanWebpackPlugin(),
        // jQuery globally
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ]
}; 

Voici les paramètres de configuration standard du webpack:

• entrée – point d'entrée / fichier JS principal
• sortie – chemin vers le fichier JS compilé
• modules – liste des modules utilisés. Ici, nous avons des définitions pour le chargeur de fichiers css, js et scss. Nous en avons besoin pour lire les fichiers js, css et scss. Si vous avez des images liées dans votre scss / css, le chargeur de fichiers est également nécessaire.
• plugins – liste des plugins utilisés. Nous utilisons `CleanWebpackPlugin` pour nettoyer les fichiers compilés précédents avant le démarrage de la nouvelle compilation et ici nous devons définir des variables globales pour la bibliothèque jQuery afin que nous puissions utiliser la variable globale $ dans tous les scripts définis et utilisé via app.js .

Modifiez et ajoutez ces lignes au package.json.

 {
  "nom": "statique",
  "version": "1.0.0",
  "la description": "",
  "main": "webpack.config.js",
  "dépendances": {
    "bootstrap": "^ 4.5.0",
    "bootstrap-slider": "^ 11.0.2",
    "bootstrap-validate": "^ 2.2.0",
    "jquery-match-height": "^ 0.7.2",
    "popper.js": "^ 1.16.1",
    "slick-carrousel": "^ 1.8.1",
    "souligné": "^ 1.10.2"
  },
  "devDependencies": {
    "@ babel / core": "^ 7.10.3",
    "@ babel / preset-env": "^ 7.10.3",
    "axios": "^ 0,19,2",
    "babel-loader": "^ 8.1.0",
    "clean-webpack-plugin": "^ 3.0.0",
    "css-loader": "^ 3.6.0",
    "exposer-loader": "^ 1.0.0",
    "chargeur de fichiers": "^ 6.0.0",
    "jquery": "^ 3.5.1",
    "sass": "^ 1.26.9",
    "sass-loader": "^ 8.0.2",
    "style-loader": "^ 1.2.1",
    "webpack": "^ 4.43.0",
    "webpack-cli": "^ 3.3.12"
  },
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "compile-scss": "node-sass ./scss/main.scss ./css/main.css --source-map true --source-map-contents sass --output-style compressé && node-sass ./ scss / editor.scss ./css/editor.css --source-map true --source-map-contents sass --output-style compressé && node-sass ./scss/editmode.scss ./css/editmode.css --source-map true --source-map-contents sass --output-style compressé "
  },
  "mots clés": [],
  "author": "Perficient",
  "licence": "ISC"
} 

Tous ces packages seront installés lorsque vous exécuterez npm install dans la ligne de commande du dossier / Static . Dans la section «scripts», nous avons trois options de construction / exécution:

• dev – compile les fichiers js en mode développement; utilisez npm run dev dans la ligne de commande
• build – compilez les fichiers js en mode production; utilisez npm run build dans la ligne de commande
• compile-scss – compile tous les fichiers scss. Nous utilisons node-sass pour compiler des fichiers scss avec des options / commutateurs. Dans le projet Alloy, nous avons trois fichiers css: main.css editor.css et editmode.css ; utilisez npm run compile-scss dans la ligne de commande

Modifiez et ajoutez ces lignes au babel.config.json .

 {
  "préréglages": [
    "@babel/preset-env"
  ]
} 

Modifiez et ajoutez ces lignes à app.js .

 "use strict";

 BundleConfig.cs ) nous devons apporter quelques modifications afin que nous puissions utiliser ces fichiers avec webpack: 

 create  vendor  dossier sous le dossier   Static  js  et déplacez-y tous les fichiers js du projet Alloy.


 create  scss  dossier sous le dossier   Static  et déplacez tous les fichiers du dossier  css  vers le  scss  ] dossier.
 Créez trois nouveaux fichiers  main.scss  et  editmode.scss . 
 Renommez  editmode.css  en  editmodealloy.css . 
  
 Ajoutez ce code à  main.scss 
 @import
    "amorcer",
    "bootstrap-responsive",
    "médias",
    "style"; 
 Ajoutez ce code à  editor.scss 
 @import
    "amorcer",
    "style"; 
 Ajoutez ce code à  editmode.scss 
 @import "editmodealloy";

 Pour vérifier si nous avons tout fait correctement, nous pouvons exécuter ces deux commandes dans la ligne de commande du dossier  / Static :  npm run dev  et  npm run compile -scss . Si tout va bien, dans l'explorateur de solutions (VS), vous aurez cette structure de fichier
   
 
 Nous devons maintenant mettre à jour la vue principale du modèle -  _Root.cshtml  fichier.

       ...
        
      @ * @ Styles.Render ("~ / bundles / css")
      @ Scripts.Render ("~ / bundles / js") * @
        
      
      @if (PageEditing.PageIsInEditMode)
      {
          
      }
      
      ...
        
 
 Nous devons commenter (ou supprimer) les lignes du bundle et ajouter le lien vers les fichiers css nouvellement créés. Nous avons ajouté vérifier si la page est rendue en mode Édition afin de pouvoir charger  editor.css  uniquement lorsque nous éditons la page.

      ...   
 Ajouter un lien vers le fichier js généré par le webpack.
 Et c'est tout!
 Note complémentaire
 Si vous voulez créer Weback et compiler des fichiers js et scss lorsque vous construisez le projet dans VS, ajoutez simplement ces lignes dans  .csproj  fichier.
 
    
    
    
    
    
    
    
 
 Remplacez simplement  AlloyDemo  par le nom de votre projet.
 
 À propos de l'auteur
 Nenad est un développeur de logiciel CMS EPiServer certifié, actuellement axé sur les technologies .NET CMS, principalement ASP .NET et MVC, JavaScript et jQuery, WCF et applications de bureau avec WPF. Il travaille également avec MS SQL et MySql. Nenad n'est pas étranger à WordPress et Drupal 7/8. Dans ses temps libres, il adore jouer au basket, à la guitare et se moquer de lui-même pour amuser sa fille!
 Plus de cet auteur