Comment utiliser Laravel Mix dans des projets non laravels

Ce didacticiel montre comment tirer parti de Laravel Mix, un emballage API WebPack rationalisé, pour la compilation d'actifs dans des projets en dehors du cadre Laravel. Cette approche accélère considérablement la configuration du projet en éliminant le besoin d'une configuration de pack Web approfondie.

Avantages clés:

• Compilation d'actifs simplifiée: Laravel Mix simplifie les complexités de webpack, faisant du traitement des actifs (JavaScript, CSS, etc.) beaucoup plus facile.
• Configuration rapide du projet: Passez moins de temps à configurer des outils de construction et plus de temps à construire votre application.
• Configuration Webpack non requise: Laravel Mix gère la configuration de la webpack pour vous, éliminant le besoin d'un fichier séparé webpack.config.js.

Prérequis:

• Node.js et npm: essentiels pour exécuter le mélange de laravel. Vérifiez l'installation avec node -v et npm -v.
• php et compositeur (facultatif): requis pour les fonctionnalités de versioning et de rechargement chaud. Homestead améliorée fournit un environnement préconfiguré pratique.
• JSON de base et familiarité terminale: La compréhension des opérations de base de la ligne de commande est utile.

Installation et configuration:

1. Initialisation du projet: Créer un nouveau répertoire de projet.

2. Installez les dépendances: Utilisez NPM pour installer Laravel Mix, cross-env (pour les variables d'environnement multiplateforme) et node-sass (pour la compilation SASS):

   <code class="language-bash">npm install laravel-mix cross-env node-sass --save-dev</code>

3. Créer webpack.mix.js: Dans le répertoire racine de votre projet, créez webpack.mix.js avec les suivants:

   <code class="language-javascript">const mix = require('laravel-mix');
   
   mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css');</code>

4. Mise à jour package.json: Ajoutez les scripts suivants à votre fichier package.json:

   <code class="language-json">"scripts": {
     "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
     "production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },</code>

5. Créer des fichiers d'actifs: Créez les fichiers resources/js/app.js et resources/sass/app.scss comme spécifié dans webpack.mix.js. Ajoutez du contenu d'échantillonnage (par exemple, le style CSS dans app.scss).

6. Exécutez Laravel Mix: Exécutez npm run dev pour compiler vos actifs. La sortie sera dans les répertoires public/js et public/css.

Rechargement chaud et éclatement de cache (facultatif):

Pour un flux de travail de développement amélioré, activez le rechargement chaud et le cache:

1. Créer mix.php: Créer un fichier mix.php dans la racine de votre projet:

   <code class="language-bash">npm install laravel-mix cross-env node-sass --save-dev</code>

2. Mise à jour composer.json: Ajouter "files": ["mix.php"] à la section "autoload" de votre composer.json. Exécuter composer dump-autoload.

3. Modifier webpack.mix.js: Ajouter .version() et .browserSync() à votre chaîne de mixage webpack.mix.js:

   <code class="language-javascript">const mix = require('laravel-mix');
   
   mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css');</code>

4. Run npm run hot: Cela démarre un serveur de développement avec un rechargement chaud.

build de production:

Pour le déploiement, utilisez npm run production pour générer des actifs optimisés et minifiés.

Conclusion:

Laravel Mix propose une approche conviviale pour gérer la compilation d'actifs dans des projets non-laravel, rationaliser le processus de développement et réduire directement les frais généraux associés à la configuration de WebPack directement. Les fonctionnalités en option de rechargement à chaud et d'éclatement de cache améliorent encore l'expérience du développeur. N'oubliez pas d'ajouter node_modules à votre fichier .gitignore.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!