How to ship javascript library with plugin?

مطور
1

Hi,
I’d like to ask what is recommended way to ship javascript library with some plugin? I can load it asynchronously from external url using e.g.

Em.$.getScript('https://cdnjs.cloudflare.com/ajax/libs/......min.js').done(function() {
...
}

But I’d prefer storing library locally. Normally I’d use vendor.js to include it and have it loaded before the plugin code, but this approach needs hacking with the Discourse core… So what is recommended way and where to add external js library to plugin? Is there some convention? Thx.

2

Just add the js lib at the assets folder in your plugin, or if available, as a gem dependency.

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

Thanks… In the assets folder will it be loaded automatically or do I need to take care of asynchronous load as quoted in previous post? I need to load library before running plugin code.

4

It’s loaded in the plugin-third-party file, inside the HEAD. You can use ES6 modules to require stuff.

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

I asked a similar question a few days ago (Existing JS module import into ES6 plugin). The problem I have is, that I want it included server side and I have no idea on which path I should require it in ES6 modules.

6

Got back to you there, so we don’t pollute here.

7

Thanks… placing js lib in asset folder and register_asset in plugin.rb did the trick.

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

عذرًا على إحياء هذا الموضوع، لكن هذا هو المكان الذي أوصلني إليه بحثي على Google. لقد حاولت لساعتين تقريبًا تحميل مكتبة JS داخل ملحقي.

  • في مجلد assets/javascripts الخاص بتطبيقي، لدي ملف باسم argdown-core.js.
  • في ملف plugin.rb، أقوم بـ register_asset 'javascripts/argdown-core.js'.
  • في assets/javascripts/discourse-markdown/argdown.js.es6، أقوم بـ import { argdown } from "argdown-core.js".

لقد جربت العديد من المتغيرات على ما سبق وما زلت أحصل على Uncaught Error: Could not find module argdown-core.js imported from discourse/plugins/Argdown/discourse-markdown/argdown.

من بين الأشياء التي جربتها:

  • نقل الملف إلى مجلدات مختلفة
  • العديد من التباديل على سطر import
  • إضافة .es6 إلى امتداد الملف - يبدو أن ملفات JS الأخرى تحتاج إلى ذلك لتعمل
  • إضافة :server_side في نهاية سطر register_asset في plugin.rb، حيث يجب أن يعمل هذا
  • البحث عن ملحقات أخرى تتطلب مكتبات تابعة لجهات خارجية - لم أستطع العثور على أي منها يستخدم استراتيجيات لا أستخدمها
  • البحث في كود Discourse لفهم نظام التجميع

هذا على الأرجح أمر بسيط وهناك شيء واضح أغفله. هل يمكن لأي شخص المساعدة؟

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

على سبيل المثال، يقوم الرابط التالي بذلك: https://github.com/discourse/discourse-algolia، وأوصيك بالنظر في الكود، خاصة الجزء العلوي من ملف plugin.rb.

كما نصيحة صغيرة: في البرمجة، تبدو الأمور صعبة دائمًا عندما تشعر بأنك لا تعرف آثار أفعالك؛ فمن المهم أن تعرف ما يحدث. أنصحك بتشغيل الأمر التالي في وحدة التحكم: window.requirejs.entries، فقد يساعدك هذا الأمر في فهم بعض الأمور.

5 إعجابات
10

شكرًا لك، هذا مفيد جدًا! وضع مكتبتي في مجلد assets/lib ساعد كثيرًا.

الآن بعد أن حصلت على المسار الصحيح إليها، تتصرف المكتبة بشكل خاطئ. :man_facepalming: إنها مكتبة كبيرة تحتوي على العديد من الوحدات الفرعية — يتطلب argdown.js ArgdownApplication.js والعديد من الملفات الأخرى. عندما تحاول تحميل ArgdownApplication.js، تظهر الرسالة “Uncaught ReferenceError: exports is not defined”.

حاولت تجميع كل شيء في ملف واحد باستخدام Webpack، لكن لسبب ما، الحزمة تفتقد مكتبة طرف ثالث تسمى “punycode”. جربت إضافة punycode إلى الوحدة الم compiled، وحاولت رفعها إلى مجلد lib وإضافة register_asset 'lib/punycode.js' إلى plugin.rb، لكنني لم أجد نجاحًا كبيرًا.

تعمل المكتبة على جهاز الكمبيوتر الخاص بي وفي إضافة أخرى قمت بكتابتها. هل توجد طريقة موصى بها لإضافة وحدة NPM إلى إضافة Discourse؟ هذا الموضوع يقول بنسخ مجلد الوحدة إلى مجلد /lib/ الخاص بك؛ لكن هذا لا يعمل معي.* هل يمكنك توجيهي نحو مثال لشخص نجح في تضمين وحدة NPM معقدة مع إضافة Discourse حتى أرى ما الذي أفعله خطأ؟

*في ذلك الموضوع، يحاولون تحميل الوحدة عن بُعد من unpkg.com؛ وأنا أفضل فعل ذلك محليًا، على الرغم من أنني ربما يجب أن أجرب ذلك.

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

أنصحك بالذهاب مع الحل المعبأ بالكامل.

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