كيفية تثبيت حزم npm في السمات/الإضافات المخصصة

مطور
1

مرحباً!

هل من الممكن تثبيت حزم npm (عبر package.json أو ما شابه) في قوالب/إضافات Discourse؟ نحن نبحث عن إمكانية إعادة استخدام بعض المكونات عبر التطبيقات، وقد يكون هذا عائقاً إذا لم يكن ذلك ممكناً.

شكراً!

2

يمكنك تقريبًا فعل ما نفعله في النواة، وهو إضافة حزم npm عبر package.json ثم نسخ ملفات JS إلى مجلد السمات (مثل javascripts/discourse/lib/ على سبيل المثال)، لكن لا يمكنك استيراد الحزم من node_modules مباشرة، ولا أعتقد أن ذلك سيعمل.

4

بافتراض أن لدينا كود جافاسكريبت عادي (مثل ما يمكن تضمينه وتشغيله لدعم مكون ويب مخصص) مثل هذا المثال، كيف يمكنني تشغيله باستخدام نهجك؟ عندما أنسخ وألصقه داخل discourse/lib ضمن سلاطي، لا يعمل.

أفترض أنه لا يعمل لأن الكود “لا يُستدعى في الوقت المناسب؟” أي أنه لا يُستدعى عند تحميل الصفحة وداخل بيئة المتصفح.

علاوة على ذلك، ولتقديم سياق للجميع، إذا حاولت استخدام https://unpkg.com/ وتضمينه في الرأس، أحصل على خطأ مثل:

image
image937×275 133 KB

5

بعد الرد على التعليق وتوصيل المعلومات في فكرة واحدة، تمكنت من التخلص من الخطأ باتباع الخطوات المذكورة في DISCOURSE_CDN_URL causes content security policy violations?

إيقاف إعداد content_security_policy

ما زلت أحاول معرفة سبب عدم عمل السكربت لأن لدي خطأ آخر، لكن ربما يكون هذا مفيدًا لشخص آخر حتى الآن.

للعلم، الخطأ الذي أواجهه هو هذا:

image
image932×126 44.6 KB

لكن السكربت تم تحميله :man_shrugging:

6

أخيرًا، لشخص ضمن نفس المهمة. نجحت في جعلها تعمل عن طريق:

  1. تعطيل إعداد content_security_policy.
  2. إضافة البرنامج النصي صراحةً برمجياً (بدون استخدام $.getScript أو أي نهج آخر).

إليك مقتطف ملخص لما نجح معي (استبدل web-component بما يناسب حالتك):

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"
          },
          `Hello world`
        );

        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);
}
7

الطريقة الأفضل للقيام بذلك هي إضافة عنوان URL المحدد إلى القائمة البيضاء إما في إعداد الموقع content security policy script src أو في مكون السمة الخاص بك، راجع تخفيف هجمات XSS باستخدام سياسة أمان المحتوى لمزيد من التفاصيل.

كما يمكنك استخدام import loadScript from "discourse/lib/load-script"; ثم استخدامه لتحميل سكريبت خارجي (بدلاً من تعريف محقن addScript خاص بك).

8

عذرًا على إحياء هذا الموضوع، ولكنه الأكثر صلة الذي تمكنت من العثور عليه.
أحاول إضافة هذه الحزمة في إضافة. أود استيرادها باستخدام import { RadixDappToolkit, RadixNetwork } from '@radixdlt/radix-dapp-toolkit'

إنها متاحة أيضًا على Yarn، والتي أعتقد أنها ما يستخدمه Discourse، ولكن لا أعتقد أنه يمكنني إضافتها كاعتمادية.. هل يمكنني؟

لست متأكدًا مما إذا كان يمكنني تحميلها باستخدام unpkg أيضًا نظرًا لوجود العديد من الاعتماديات. ما هي الخيارات المتاحة لدي؟ أي تلميحات ستكون محل تقدير.

عذرًا على السؤال الواسع، لكني مرتبك جدًا. شكرًا لك!