NPM Pakete - Laravel app.js und css

Ô׎ Laravel Ô×Ę Laravel API

NPM (Node Package Manager) dient als Paketmanager f├╝r JavaScript-Files, ├Ąhnlich Composer f├╝r PHP. Mittels NPM k├Ânnen also Javascript Pakete heruntergeladen und zusammengef├╝hrt werden. F├╝r das Zusammenf├╝gen mehrere NPM-Pakete zu einer JS-Datei wird Webpack verwendet, entsprechend k├Ânnen heruntergeladene Pakete in Webpack eingebunden und mittels npm run zusammengef├╝gt werden.

Gulp? F├╝r den Buildprozess (Zusammenf├╝gen der Javascript-Sourcen) k├Ânnte auch Gulp verwendet werden, siehe die ein oder andere Diskussion im Netz zu NPM vs. Gulp. Ich verwende NPM, da Gulp f├╝r mich keinen Mehrwert bietet. Seit Laravel Version 5.4┬áwird auch seitens Laravel NPM anstelle von Gulp verwendet.

Voraussetzungen installieren

node.js und npm installieren ...

Debian/Linux 

Unter Ubuntu 16.04 war es mir nicht m├Âglich node fehlerfrei zu verwenden, daher habe ich ein Update auf die neueste Version gemacht:

sudo apt-get purge nodejs npm
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo npm cache clean -f
sudo npm install -g n
sudo n stable
sudo ln -sf /usr/local/n/versions/node/8.6.0/bin/node /usr/bin/node
npm rebuild node-sass --force

Windows

In Windows kann NPM ganz einfach mit folgendem Paket installiert werden: www.npmjs.com/get-npm

Javascript-Pakete hinzuf├╝gen

Nachdem npm installiert wurde, k├Ânnen Javascript-Pakete im Terminal heruntergeladen oder aktualisiert werden.

Dazu wird folgender Befehl verwendet:

npm install PAKETNAME

Die Pakete werden dabei in die Datei package.json eingetragen und im Ordner /node_modules abgelegt.

/public/js/app.js 

Damit die Pakete verwendet werden k├Ânnen, m├╝ssen diese noch zu einer oder mehren Javascript-Files in public zusammengef├╝hrt werden, dies geschieht mit┬á besten direkt mit npm mit folgedem Befehl:

npm run dev

npm run dev, f├╝r Development also Entwicklung. Die finale Version sollte dann mit npm run prod erzeugt werden.

Beim Aufruf von npm run dev wird die Datei: "/webpack.mix.js" verarbeitet, diese sieht ohne Anpassung ca. so aus 

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

webpack.mix.js l├Ądt also Javascript-Code aus resources/assets/js/app.js und erzeugt /public/js/app.js┬á

Styles werden aus der Datei resources/assets/sass/app.scss geladen und nach public/css/app.css geschrieben. Die zuvor heruntergeladenen Javascript-Sourcen werden zu diesem Zeitpunkt noch nicht integriert, diese müssen vorher eingebunden werden:

Mehrere Javascript-Files und CSS-Files erstellen:

Am Beispiel des Javascript-Paketes Datatables: 

npm install datatables.net
npm install datatables.net-bs4

Original /webpack.mix.js - File:

mix.js('resources/assets/js/app.js', 'public/js').sourceMaps().
.sass('resources/assets/sass/app.scss', 'public/css');

Beispiel um 2 Javascript-Files zu erzeugen, hier zus├Ątzlich Datatables - Javascript und CSS-Files:

mix.js('resources/assets/js/app.js', 'public/js')
.scripts([
'node_modules/datatables.net/js/jquery.dataTables.js',
'node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js'
], 'public/js/datatable.js')
.styles(['node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css'], 'public/css/datatable.css')
.sass('resources/assets/sass/app.scss', 'public/css');

siehe auch: https://laravel.com/docs/5.6/mix 

Nach jeder Webpack-Anpassung muss nat├╝rlich npm run dev oder npm run prod ausgef├╝hrt werden.

Javascript und CSS-Sourcen in app.js / app.scss integrieren

Anstelle die Javascript-Sourcen in eigene Files zu mergen, k├Ânnen diese auch in app.js / app.scss angef├╝gt werden, hier wieder als Beispiels die Javascript-Sourcen f├╝r datatables.net:

npm install datatables datatables.net datatables.net-bs4 datatables.net-buttons datatables.net-colreorder datatables.net-scroller datatables.net-select

Nachdem die Pakete in app.js / app.scss integriert werden sollen, kann die Default-Webpack-Datei: /webpack.mix.js verwendet werden:

mix.js('resources/assets/js/app.js', 'public/js').
.sass('resources/assets/sass/app.scss', 'public/css');

Die Java-Script Pakete k├Ânnen in: /assets/js/bootstrap.js hinzugef├╝gt werden

//datatables https://datatables.net/download/npm
window.DataTables      = require( 'datatables.net' );
window.DataTablesbs4     = require( 'datatables.net-bs4' );
window.buttons = require( 'datatables.net-buttons' );
window.colVis = require( 'datatables.net-buttons/js/buttons.colVis' );
window.html5 = require( 'datatables.net-buttons/js/buttons.html5' );
window.print = require( 'datatables.net-buttons/js/buttons.print' );
window.select = require( 'datatables.net-select' );
window.colreorder = require( 'datatables.net-colreorder' );
window.colreorder = require( 'datatables.net-scroller' );

Styles in /assets/js/app.scss

@import '~datatables.net-bs4/css/dataTables.bootstrap4';

~ ist dabei ein Shortcut auf /node_modules/

F├╝r das Zusammenf├╝gen muss an dieser Stelle wieder npm run dev oder npm run prod ausgef├╝hrt werden.

Beispiel Paket feather-icons:

npm install feather-icons

und hinzufügen zu resources/assets/js/bootstrap.js

window.feather = require('feather-icons');

Verwenden in der Webseite mit:

...
	   <script src="/js/app.js"></script>
		 <script>
		   feather.replace()
		 </script>
</body>

Noch ein Beispiel: Quill:

Quill Sourcen k├Ânnen in HTML nat├╝rlich direkt ├╝ber CDN eingebunden werden:

<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.2/quill.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.2/quill.snow.css" />

Alternativ k├Ânnen die JavaScript-Sourcen in bootstrap.js eingebunden :

window.Quill= require( 'quill' );

CSS über app.scss: 

@import "~quill/dist/quill.snow.css";

in HTML reicht es dann f├╝r alle Scripts die app.js und app.css einzubinden:

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>

Cache Busting

Damit die Browser keine alten Versionen der Dateien app.css und app.js cachen, kann f├╝r jede Version eine ID angeh├Ąngt werden.

mix.js('resources/assets/js/app.js', 'public/js').
.sass('resources/assets/sass/app.scss', 'public/css').version();

Die Dateien k├Ânnen dann wie folgt in den Blade-Templates verwendet werden:

<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

Vue 2 Components

Integration von Vue Components:

/resources/assets/js/app.js:

Vue.component('input-list', require('./components/InputList.vue'));

/resources/assets/components/InputList.vue

<script>
export default {
	props: ['value'],	
	methods: {
	},
};
</script>

Vue 2 Mixins und Components

Bei der Verwendung von VUE Components und Mixins┬áist es m├Âglich die Components┬á

/resources/assets/js/app.js:

require ('./mixins/mixin');
Vue.component('input-list', require('./components/InputList.vue'));

/resources/assets/js/mixins/mixin.js

				mixin = {
					props: ['value'],	
					methods: {

					}
				},
					template: `
						<div>
... 
						</div>
					`,
				  data: function () {
					return {
					  message: 'hello'
					}
				  }
				}	

Das Template kann hier, abh├Ąngig vom Einsatzzweck im Mixin oder im Component hinterlegt werden.

/resources/assets/components/InputList.vue

<script>
export default {
	mixins: [mixin]
};
</script>

An dieser Stelle k├Ânnen auch verschiedene Mixins geladen werden, wodurch der Quellcode modularer gestaltet werden kann.

Quill Editor Component: Hinzuf├╝gen von highlight.js

Ursprünglich habe ich die VUE-Componente Quill-Editor verwendet: vue-quill-editor. Nachdem das Paket nicht immer zeitnahe aktualisiert wird bzw. ich Quill 2 testen wollte, verwende ich NPM-Pakete, wie oben beschrieben. 

Dennoch kurz notiert:

Bei diesem Beispiel wird highlight.js zur VUE-Componente Vue Editor hinzugefügt. 

Zus├Ątzlich highlight.js f├╝r quill editor:

npm install highlight.js

in app.js:

import 'highlight.js/styles/monokai-sublime.min.css'
import 'highlight.js'

im VUE 2 Component:

import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

Render Page: 

$(document).ready(function() { $('pre').each(function(i, block) { hljs.highlightBlock(block); }); });

Summernote

bootstrap.js

window.Summernote=require( 'summernote' );

app.scss

//Summernote
@import "~summernote/dist/summernote.css";

Alternativ: laden in einer VUE-Komponente (Vue-Component)

Falls bestimmte Pakete nur in einem Vue-Component ben├Âtigt werden, k├Ânnen diese Anstelle in bootstrap.js auch in der Component importiert werden:

    import 'summernote'
    import "summernote/dist/summernote.css";

Eigene js Funktion von einem js-Files in einem VUE-Component laden

z.B. eine eigene Funktion im Ordner /resources/js/myFunction.js

export function myFunction() {

    console.log('Function called');

};

in einer Vue-Component kann die JS-Funktion dann so geladen werden:

<script>
...
	import {myFunction} from '../../js/myFunction';

Die Funktion kann dann innerhalb des <script>-Blocks der Vue-Component verwendet werden.

Troubleshooting node-modules Ordner neu aufbauen

sudo rm -rf node_modules
sudo rm package.json.lock
npm install

aktuell hatte ich Probleme mit der Webpack Version 4.

NPM downgraden:

npm i webpack@3.11.0 

NPM Upgrade aller Pakete

Install the tool

npm install -g npm-check-updates

Achtung: der folgende Befehl ├╝berschreibt die Dateie package.json:

ncu --upgrade
npm install
positive Bewertung({{pro_count}})
Beitrag bewerten:
{{percentage}} % positiv
negative Bewertung({{con_count}})

DANKE f├╝r deine Bewertung!

Aktualisiert: 26.10.2019 von Bernhard |­čöö


Fragen / Kommentare


(sortiert nach Bewertung / Datum) [alle Kommentare(neueste zuerst)]

ÔťŹanonym
09.01.2019 06:21
User: Philipp 
Sehr gut erkl├Ąrt, danke! 
Jetzt weis man was in welche Datei rein kommt und woher die Daten gezogen werden. Das wird aus der Laravel Doku nicht ganz ersichtlich.