Wie kann man Assets aus einem NPM-basierten Paket in einem PHP-Composer-basierten Paket laden?

Question

Zunächst einmal: Dies ist nicht die Frage, wie NPM-Paket als Abhängigkeit des Composer-Pakets zu verwenden ist. Das ist kein Problem: Die direkte Verwendung von NPM oder eines Composer-Plugins löst es.

wir Angenommen geladen NPM-Paket als eine Abhängigkeit von Composer-Paket (unter Verwendung von create-Paket) wir etwa eine solche Struktur erhalten:

Root 
+-- node_modules 
| +-- our_npm_package 
| +-- assets 
| | +-- our.css 
| +-- js 
|  +-- bundle.js 
+-- vendor 
| +-- our 
| +-- package 
+-- src 
+-- tests 
| composer.json 
| package.json 
| index.php 

NPM-Paket enthält einige Web-Assets (JS, CSS, Bilder). Wir können es mit Browserify bündeln und einfach bündle.js in unserer index.php verwenden. Aber das Problem ist meines Erachtens ein schlechter Weg. Browserify sollte nur JS bündeln, CSS und Bilder allein lassen. Die Bereitstellung von CSS im Browser über JS ist ein wirklich falscher Einsatz der Technologie: Der Browser ist durchaus in der Lage, CSS selbst zu laden. Und so funktioniert es für Browser mit deaktiviertem JS. Die gleiche Geschichte über Bilder: Browser kann sie ohne Hilfe von JS laden und anzeigen. So

ich festgestellt, dass Browserify (großes Paket soll ich sagen) sollte nur für JS verwendet werden, und es produziert schöne bundle.js die wir von unserem index.php nennen

Hier ist der Kern der Frage: Wie um auf diese NPM-basierten Assets in unserem Composer-basierten PHP-Paket richtig zu verweisen? Natürlich können wir verwenden:

<link rel="stylesheet" type="text/css" href="/node_modules/our_npm_package/assets/our.css"> 

aber das ist hässlich und nicht zuverlässig. Ich möchte es wirklich sein:

<link rel="stylesheet" type="text/css" href="/css/our.css"> 

Gleiches geht über bundle.js. Ich will nicht haben:

<script src="/node_modules/our_npm_package/js/bundle.js"></script> 

sondern

<script src="/js/bundle.js"></script> 

Viele Leute nur Skripte machen, die CSS und JS Ordner im Stammordner erstellen und dann Vermögenswerte von NPM-Paketen stricken-Picking. Funktioniert aber immer noch hässlich.

Einige Leute (vor allem mit Frameworks) ging weiter und verwenden Sie eine Art von Composer-Plugin, die automatisch kopiert. In diesem Fall geben sie an, welche Assets in ihrem Composer-Paket enthalten sein sollen. Besser als nur eine einfache Kopie, aber immer noch nicht wirklich gut.

Was ich wirklich haben möchte, ist Assets im NPM-Paket irgendwie zu deklarieren. Dann haben Sie Composer Plugin/Skript, um es in NPM-Paket zu finden und symlink/kopieren Sie sie, wo sie für PHP-Code verwendet werden sollen. Darüber hinaus stellen Sie sicher, dass alle von PHP benötigten Assets vorhanden sind.

Ich bin am Rande des Schreibens Composer-Plugin für diesen Zweck selbst, aber ich will das Rad nicht neu erfinden. Ich bin sicherlich nicht der Einzige, der sich mit dem Zusammenfügen von Composer PHP/NPM JS auseinandersetzt, und ich hoffe, dass dieses Problem bereits in der richtigen Weise gelöst wurde. Ich habe in den letzten drei Tagen viel gegoogelt und konnte nichts Anständiges finden.

Können Sie mir bitte sagen, gibt es eine einfache Möglichkeit zur Lösung dieses Problems? Single Composer Plugin kann als eine Antwort betrachtet werden.

Answer 1

Sie können Gulp/Grunt/andere Task-Runner verwenden, um andere Assets (Bilder, Stylesheets usw.) zu finden und sie an das gewünschte Ziel zu kopieren.

/node_modules/our_npm_package/assets/our.css 

zu

kopiert werden konnte

/css/our.css 

In Gulp, könnte es Dies würde kopieren Sie alle .css Dateien überall in node_modules/ zu css/

gulp.src('node_modules/**/*.css') 
    .pipe(gulp.dest('css/')); 

wie folgenden Ausschnitt mit etwas erreicht werden.