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

مطور
1

Hello!

Is it possible to install npm packages (via package.json or similar) in Discourse Themes/Plugins? We are looking to reuse some components across apps and this can be a blocker if it’s not possible.

Thanks!

2

You could sorta do what we do in core, which is, add npm packages via package.json and then copy JS files to a theme folder (like javascripts/discourse/lib/ for example) but you can’t import the packages from node_modules directly, I don’t think that would work.

إعجابَين (2)
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);
}
إعجاب واحد (1)
7

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

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

6 إعجابات
8

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

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

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

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