Hallo!
Ist es möglich, npm-Pakete (über package.json oder Ähnliches) in Discourse-Themen/Plugins zu installieren? Wir möchten einige Komponenten über verschiedene Apps hinweg wiederverwenden, und falls dies nicht möglich ist, könnte das ein Hindernis darstellen.
Vielen Dank!
Du könntest so vorgehen, wie wir es im Core tun: npm-Pakete über package.json hinzufügen und dann die JS-Dateien in einen Theme-Ordner kopieren (z. B. javascripts/discourse/lib/). Allerdings kannst du die Pakete nicht direkt aus node_modules importieren – das würde meiner Meinung nach nicht funktionieren.
Angenommen, wir haben einfachen JavaScript-Code (etwas, das wir einbinden und ausführen können, um eine benutzerdefinierte Web-Komponente zu unterstützen) wie dieses hier. Wie kann ich ihn mit deinem Ansatz ausführen? Wenn ich ihn kopiere und in discourse/lib innerhalb meines Themes einfüge, funktioniert es nicht.
Ich vermute, es funktioniert nicht, weil der Code „nicht zum richtigen Zeitpunkt aufgerufen wird
Nachdem ich auf den Kommentar geantwortet und die Informationen in einer einzigen Aussage zusammengefasst habe, habe ich den Fehler behoben, indem ich DISCOURSE_CDN_URL causes content security policy violations? befolgt habe.
Die Einstellung
content_security_policydeaktivieren.
Ich habe immer noch nicht herausgefunden, warum das Skript nicht funktioniert, da ich einen weiteren Fehler habe, aber vielleicht ist es bisher für andere nützlich.
Zur Info: Der Fehler, den ich habe, ist dieser:
Aber das Skript wurde geladen 
Schließlich, für jemanden innerhalb derselben Quest. Ich habe es so zum Laufen gebracht:
content_security_policy deaktivieren$.getScript oder andere Ansätze verwenden).Ein Beispielzusammenfassungsschnipsel dessen, was bei mir funktioniert, ist (ersetze web-component durch das, was in deinem Fall sinnvoll ist):
import { withPluginApi } from "discourse/lib/plugin-api";
let flag = false;
export default {
name: "web-component",
initialize() {
withPluginApi("0.8", api => {
api.onAppEvent("page:changed", () => {
if (flag) return;
addScript(
"https://unpkg.com/web-component@0.0.1/dist/web-component/web-component.js",
{ defer: "", crossorigin: "anonymous" }
);
addWebComponent(
"web-component",
{
id: "web-component"
},
`Hallo Welt`
);
flag = true;
});
});
}
};
function addWebComponent(tag, attrs, content) {
var component = document.createElement(tag);
Object.keys(attrs).forEach(key => {
component.setAttribute(key, attrs[key]);
});
component.textContent = content;
document.body.appendChild(component);
}
function addScript(src, attrs) {
var script = document.createElement("script");
script.setAttribute("src", src);
Object.keys(attrs).forEach(key => {
script.setAttribute(key, attrs[key]);
});
document.body.appendChild(script);
}
Der bessere Weg, dies zu tun, besteht darin, diese spezifische URL entweder in der Site-Einstellung content security policy script src oder in Ihrer Theme-Komponente freizugeben. Weitere Details finden Sie unter XSS-Angriffe mit Content Security Policy abwehren.
Außerdem können Sie import loadScript from "discourse/lib/load-script"; verwenden und damit ein externes Skript laden (anstatt einen eigenen addScript-Injektor zu definieren).
Entschuldigung, dass ich diesen Thread wieder aufgreife, aber es ist der relevanteste, den ich finden konnte.
Ich versuche, dieses Paket in ein Plugin einzubinden. Ich möchte es mit import { RadixDappToolkit, RadixNetwork } from '@radixdlt/radix-dapp-toolkit' importieren.
Es ist auch über Yarn verfügbar, was meiner Meinung nach von Discourse verwendet wird, aber ich glaube nicht, dass ich es einfach als Abhängigkeit hinzufügen kann… oder doch?
Ich bin mir nicht sicher, ob ich es einfach über unpkg laden kann, da es viele Abhängigkeiten hat. Welche Optionen habe ich? Jeder Hinweis ist willkommen.
Entschuldigung für die allgemeine Frage, aber ich bin sehr verwirrt. Danke!