{"id":12667,"date":"2023-04-25T04:59:56","date_gmt":"2023-04-25T04:59:56","guid":{"rendered":"https:\/\/www.bay20.com\/?p=12667"},"modified":"2025-09-25T15:09:12","modified_gmt":"2025-09-25T09:24:12","slug":"wie-verwendet-man-javascript-bibliotheken-js-von-drittanbietern-in-lwc","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/wie-verwendet-man-javascript-bibliotheken-js-von-drittanbietern-in-lwc\/","title":{"rendered":"Wie verwendet man JavaScript-Bibliotheken (JS) von Drittanbietern in LWC?"},"content":{"rendered":"\n

JavaScript-Bibliotheken von Drittanbietern sind vorgefertigte JavaScript-Codepakete, die entwickelt wurden, um die Aufgaben des Entwicklers zu erleichtern, z. B. DOM-Manipulation, Ereignisbehandlung, Animationen und die Erstellung visueller Effekte. Wir verwenden diese Bibliotheken in Webseiten mit einem Tag oder wir installieren sie mit Paketmanagern wie npm.<\/p>\n\n\n\n

Verwendung von JavaScript(JS)-Bibliotheken von Drittanbietern in LWC<\/h2>\n\n\n\n

Wir k\u00f6nnen JavaScript-Bibliotheken von Drittanbietern in LWC mit Hilfe einer Salesforce-Funktion namens statische Ressourcen verwenden. Wir verwenden diese Bibliotheken in unserer Komponente, um die Komplexit\u00e4t des Codes zu verringern. Zum Beispiel verwenden wir moment.js zur Validierung und Anzeige von Daten und Zeiten.<\/p>\n\n\n\n

Follow these steps to use third-party JavaScript libraries in Lightning web components:<\/p>\n\n\n\n

Schritt 1:<\/strong> Laden Sie zun\u00e4chst die moment.js-Bibliothek von https:\/\/momentjs.com<\/a> herunter.<\/p>\n\n\n\n

Schritt 2: <\/strong>Geben Sie nun \u201eStatische Ressourcen\u201c<\/strong> in das Feld \u201eSchnellsuche\u201c<\/strong> auf der Einrichtungsseite Ihrer Salesforce-Organisation ein.<\/p>\n\n\n\n

Schritt 3: <\/strong>Klicken Sie auf der Seite \u201eStatische Ressourcen\u201c auf die Schaltfl\u00e4che \u201eNeu\u201c<\/strong>, um eine neue statische Ressource zu erstellen. F\u00fcllen Sie anschlie\u00dfend alle Informationen zur statischen Ressource aus, laden Sie die Datei moment.js hoch und klicken Sie auf die Schaltfl\u00e4che \u201eSpeichern\u201c<\/strong>.<\/p>\n\n\n\n

\"Third-Party<\/figure>\n\n\n\n

Schritt 4: <\/strong>\u00d6ffnen Sie dann die \u201e.js\u201c<\/strong>-Datei der Lightning-Webkomponente, in der Sie die Bibliothek verwenden m\u00f6chten.<\/p>\n\n\n\n

Schritt 5: <\/strong>Importieren Sie jetzt die Bibliothek aus der statischen Ressource. Importieren Sie auch Methoden aus dem platformResourceLoader-Modul.<\/p>\n\n\n\n

import myLib from '@salesforce\/resourceUrl\/moment';\nimport { loadScript } from 'lightning\/platformResourceLoader';<\/code><\/pre>\n\n\n\n
Hinweis: <\/strong>loadScript wird zum Laden von JavaScript-Bibliotheken verwendet. Weitere Informationen \u00fcber platformResourceLoader<\/strong> finden Sie in den Referenzdokumenten zu lightning\/platformResourceLoader<\/a>.<\/p>\n\n\n\n
Schritt 6: <\/strong>Laden Sie schlie\u00dflich die Bibliothek und rufen Sie ihre Funktionen in einer then()-Methode wie im folgenden Code auf:<\/p>\n\n\n\n
loadScript(this, moment + '\/moment.js').then(() => {\nlet currentTime = moment().format('LLLL');\n});<\/code><\/pre>\n\n\n\n
Hinweis:<\/strong> Das Modul platformResourceLoader hat zwei Methoden, loadScript und loadStyle. Mit diesen Methoden steuern wir die Ladesequenz unseres Skripts oder Stils.<\/p>\n\n\n\n
Verwendung von CSS-Bibliotheken von Drittanbietern in LWC<\/h3>\n\n\n\n
Auf die gleiche Weise k\u00f6nnen Sie auch CSS-Bibliotheken von Drittanbietern verwenden. Sie m\u00fcssen nur die loadStyle-Methode anstelle der loadScript-Methode des platformResourceLoader-Moduls verwenden.<\/p>\n\n\n\n
Bitte kontaktieren Sie uns unter manish@bay20.com<\/a><\/strong> oder rufen Sie uns unter +91-8800519180<\/a><\/strong> an, wenn Sie Unterst\u00fctzung in Bezug auf Salesforce ben\u00f6tigen. Sie k\u00f6nnen auch die Salesforce-Entwicklungsseite<\/strong><\/a><\/strong> besuchen, um die von uns angebotenen Dienstleistungen zu \u00fcberpr\u00fcfen.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
Third-party JavaScript libraries are pre-written JavaScript code packets that are developed to make the developer’s tasks easier, such as DOM manipulation, event handling, animations, and visual effect creation. We use these libraries in web pages with a tag or we install them using package managers like npm.<\/p>\n","protected":false},"author":89,"featured_media":12680,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163,159,128],"tags":[],"class_list":["post-12667","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-entwickler","category-lwc","category-salesforce"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/12667","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/89"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=12667"}],"version-history":[{"count":15,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/12667\/revisions"}],"predecessor-version":[{"id":17427,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/12667\/revisions\/17427"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/12680"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=12667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=12667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=12667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}