So verwenden Sie Laravel-Mix in Nicht-Laravel-Projekten

Dieses Tutorial zeigt, wie man Laravel Mix, einen optimierten Webpack -API -Wrapper, für die Zusammenstellung von Asset in Projekten außerhalb des Laravel -Frameworks nutzt. Dieser Ansatz beschleunigt das Projekt -Setup erheblich, indem die Notwendigkeit einer umfassenden Webpack -Konfiguration eliminiert wird.

Schlüsselvorteile:

• vereinfachte Vermögensverheilung: laravel Mix vereinfacht die Komplexität des Webpacks und macht die Verarbeitung von Anlagen (JavaScript, CSS usw.) viel einfacher.
• Schnelles Projekt -Setup: Verbringen Sie weniger Zeit damit, Build -Tools zu konfigurieren und mehr Zeit zu erstellen.
• WebPack -Konfiguration nicht erforderlich: Laravel Mix verarbeitet die Webpack -Konfiguration für Sie und beseitigt die Notwendigkeit einer separaten webpack.config.js -Datei.

Voraussetzungen:

• node.js und npm: Essentiell für das Ausführen von Laravel -Mix. Überprüfen Sie die Installation mit node -v und npm -v.
• PHP und Komponist (optional): Erforderlich für Versionen und heiße Nachladefunktionen. Homestead Improved bietet eine bequeme vorkonfigurierte Umgebung.
• Grundlegende JSON- und Terminal-Vertrautheit: Verständnis der grundlegenden Befehlszeilenvorgänge ist hilfreich.

Installation und Setup:

1. Projektinitialisierung: Erstellen Sie ein neues Projektverzeichnis.

2. Abhängigkeiten installieren: Verwenden Sie NPM, um Laravel Mix, cross-env (für variablen plattformübergreifende Umgebungen) und node-sass (für die SASS-Kompilierung):

   zu installieren)

   npm install laravel-mix cross-env node-sass --save-dev

3. Erstellen webpack.mix.js: Erstellen Sie in Ihrem Projektverzeichnis webpack.mix.js mit Folgendem:

   const mix = require('laravel-mix');
   
   mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css');

4. update package.json: Fügen Sie Ihren folgenden Skripten Ihrer package.json -Datei hinzu:

   "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"
   },

5. Erstellen Sie Asset -Dateien: Erstellen Sie die in resources/js/app.js angegebenen resources/sass/app.scss und webpack.mix.js. Fügen Sie einige Beispielinhalte hinzu (z. B. CSS -Styling in app.scss).

6. Führen Sie Laravel Mix aus: Führen Sie npm run dev aus, um Ihre Vermögenswerte zu kompilieren. Die Ausgabe befindet sich in den Verzeichnissen public/js und public/css.

heißes Nachladen und Cache -Busting (optional):

Für einen verbesserten Entwicklungs -Workflow finden Sie das heiße Nachladen und Cache -Busting:

1. erstellen mix.php: Erstellen Sie eine mix.php Datei in Ihrem Projektroot:

   npm install laravel-mix cross-env node-sass --save-dev

2. update composer.json: add "files": ["mix.php"] zum "autoload" -Abschnitt Ihres composer.json hinzufügen. Ausführen composer dump-autoload.

3. modifizieren webpack.mix.js .version() .browserSync() webpack.mix.js Ausführen

   :

   const mix = require('laravel-mix');
   
   mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css');

   Dies startet einen Entwicklungsserver mit heißem Nachladen.

4. npm run hot Produktionsbau:

Verwenden Sie für die Bereitstellung

, um optimierte, abgebildete Vermögenswerte zu generieren.

Schlussfolgerung:

npm run production laravel Mix bietet einen benutzerfreundlichen Ansatz zur Verwaltung der Vermögenszusammenstellung in Nicht-Laravel-Projekten, zum Strafen des Entwicklungsprozesses und zur Reduzierung des Overheads, das mit dem direkten Konfigurieren von Webpack zugeordnet ist. Das optionale heiße Nachladen und das Cache -Busting -Unternehmen verbessern die Entwicklererfahrung weiter. Denken Sie daran, Ihre

Datei

hinzuzufügen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Laravel-Mix in Nicht-Laravel-Projekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!