كيفية تحميل مكتبة في مكون سمة

مطور
1

من How to require external libraries in a component helper file? - #2 by merefield

مرحباً @merefield – هل ما زال هذا هو الأسلوب الصحيح للقيام بذلك؟

أحاول جلب qrcode.js لإنشاء رمز QR في المتصفح.

أواجه مشكلة مع CSP (سياسة أمان المحتوى) أيضاً. لا أفهم كيف يمكن أن تكون مشكلة CSP إذا كان الملف موجوداً على نفس المضيف. هذا على خادم إنتاجي باستخدام discourse_theme لتصحيح الأخطاء.

أضع هذا في ملف تهيئة:

import loadScript from "discourse/lib/load-script";
import { withPluginApi } from "discourse/lib/plugin-api";
// import QRCode from "discourse/lib/qrcode";
export default {
  name: "qrcode",
  ensureQRCode() {
    window.console.log(settings.theme_uploads.QRCode);
    return loadScript(settings.theme_uploads.QRCode).then(() => {
      return loadScript(settings.theme_uploads.QRCode);
    });
  },
  initialize(container) {
    withPluginApi("0.8.7", (api) => {
      api.decorateCookedElement((cooked, postWidget) => {
        const placeholderNodes = cooked.querySelectorAll(
          ".d-wrap[data-wrap=qrcode]"
        );
        this.ensureQRCode();
        // const qr = new QRCode(
        //   document.getElementById("qrcode"),
        //   "http://jindo.dev.naver.com/collie"
        // );
...

ويبدو أن الدالة لا يتم استدعاؤها لتحميل البرنامج النصي إذا لم أقم باستدعاء this.ensureQRCode();، وهو ما لا يبدو أنك تقوم به في المكون الخاص بك.

البرنامج النصي متاح ويمكنني استرداده (لذلك حصلت على الأشياء الصحيحة في about.json و /assets/qrcode.js)، لكن المتصفح يرفض تحميله.

إعجابَين (2)
2

نتيجة loadscript الخاص بك هي وعد (promise)، لذا تحتاج إلى وضع الكود الخاص بك الذي يعتمد عليه في كتلة .then وفقًا لمثالي البرمجي

3 إعجابات
3

لا أعرف ما إذا كان هذا شيئًا مشابهًا (أشك في ذلك) ولكنه يزعجني بشدة لأن هذا يجب أن يكون شيئًا بسيطًا للقيام به.

إعجاب واحد (1)
4

شكرا جزيلا!

لكن اعتقدت أنني فعلت ذلك:

    return loadScript(settings.theme_uploads.QRCode).then(() => {
      return loadScript(settings.theme_uploads.QRCode);
    });

لقد حاولت جاهدًا تغيير مثالك بأقل قدر ممكن :slight_smile:

ربما أحتاج إلى استخدام .then عندما أحاول استخدام الكود لاحقًا؟

لكن هذا لا يحل مشكلة CSP، أليس كذلك؟

image

إعجابَين (2)
5

نصيحتي الرئيسية هي:\n\n\n### ضع المكتبة في مجلد الأصول (assets)\n\nهذا يحل مشكلة CSP، ويجعل السمة مستقلة بذاتها، ويعتبر ممارسة جيدة بدلاً من تحميلها من أطراف ثالثة.\n\n### قم بتحميلها عند الحاجة (lazily)\n\nفقط عند الحاجة، يمكنك تحميلها عند الحاجة باستخدام await loadScript. هذا يعني أنها لن يتم تحميلها في الصفحات التي لا تحتاج إليها، مما يبطئ موقعك بالكامل.\n\n—\n\nمثال جيد لسمة تتبع هذه الممارسات الجيدة هو GitHub - discourse/discourse-mermaid-theme-component

6 إعجابات
6

نعم، بالضبط. :+1:. هكذا يعمل في مثالي.

3 إعجابات
7

سؤال آخر: ما الفرق بين ...initializers/mycode.js و ...api-initializers/mycode.js؟

وشكراً جزيلاً لكما!!

كان ذلك مثالاً جيداً! تمكنت من فهمه!

حسناً، اعتقدت أنني اتبعت مثالك. لا يزال جافاسكريبت يبدو وكأنه متاهة ملتوية من الممرات التي تبدو متشابهة.

3 إعجابات