কীভাবে আজ ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট লাইব্রেরিটি আধুনিকীকরণ এবং প্যাকেজ করবেন?

Question

আমি আধুনিক ক্লায়েন্ট-সাইড জেএস বাস্তুতন্ত্রের সাথে ধরা পড়েছি এবং কমনজেএস এবং এএমডি পড়ছি (সম্পর্কিত সরঞ্জামগুলি - ব্রাউজারিফাই, আবশ্যক, ওয়ানজ, জ্যাম, কয়েক ডজন অন্যান্য)। আমি যদি জাভাস্ক্রিপ্ট লাইব্রেরি লিখছি, তবে আমি কীভাবে এটিকে মডুলারি / প্যাকেজ করব যাতে এটি সর্বাধিক বিস্তৃতভাবে অ্যাক্সেসযোগ্য হতে পারে (আদর্শভাবে যারা ব্যবহারকারীগণ কমনজেএস, এএমডি, এবং বিশেষত দু'জনেই শপথ করেন না)?

JQuery এর মতো জনপ্রিয় লাইব্রেরিগুলি নিজেকে তৈরি করার জন্য কেবল পুরানো-স্কুল ফাইল কনটেনটেশন ব্যবহার করে এবং exportsএটি গ্লোবাল প্রসঙ্গে লিখতে হবে কিনা তা গতিশীলভাবে সনাক্ত করে। আমি বর্তমানে একই জিনিসটি করছি, তবে মূল ক্ষতিটি হ'ল যদি আমি (jQuery এর বিপরীতে) কয়েকটি লাইব্রেরির উপর নির্ভর করি তবে ব্যবহারকারীদের ট্রানজিটিভ সেটটিকে ম্যানুয়ালি প্রাক-অন্তর্ভুক্ত করতে বলার দরকার নেই nice (যদিও আমার বর্তমানে মাত্র দুটি নির্ভরশীলতা রয়েছে)) এবং অবশ্যই বিশ্বব্যাপী নেমস্পেস দূষণ।

বা সম্ভবত প্রতিটি গ্রন্থাগারের জন্য আমার গ্রন্থাগারের একাধিক সংস্করণ উত্পন্ন করা সবচেয়ে পরিষ্কার?

আমি প্যাকেজিং এবং প্রকাশ সম্পর্কেও ভাবছি। বেশ কয়েকটি সিস্টেম রয়েছে, তবে আমি বিশ্বাস করি যে প্রধানটি হ'ল ধনুক, যা মোকাবিলা করা সহজ কারণ এটি সমস্ত কিছু আনা হয়। তবে আমি ভাবছি যে আমারও অন্যান্য প্যাকেজ সিস্টেমের মতো উপাদানকে লক্ষ্য করা উচিত (যার জন্য কমনজেএস প্রয়োজন)।

আমার সম্পর্কে অন্যান্য সচেতন হওয়া উচিত? এই সমস্ত জন্য কোনও ভাল উদাহরণ প্রকল্প আছে?

Comments

এটি একটি দুর্দান্ত টিউটোরিয়াল: youtube.com/watch?v=USk1ie30z5k লোকটি প্রয়োজনীয় জেএস (r.js), নোড, বোভার, ব্যাকবোন, ... উল্লেখ করেছে

@ ম্যাটফেনউইক আমি উল্লিখিত সমস্ত সরঞ্জাম ব্যবহার করেছি; ভিডিওটি আমার কোনও প্রশ্নের উত্তর দেয় না।

— ইয়াং

আপনি এটি দেখেছেন? আমি মনে করি যে লোকটি একটি লাইব্রেরি দিয়ে আমাদের হাঁটছে এবং কোডের নির্দিষ্ট রেখাগুলির ব্যাখ্যা দিয়েছিল যা এটির কোনও প্রয়োজন ছাড়াই একাধিক মডিউল সিস্টেমগুলির সাথে কাজ করে।

Answer 1

আমি সবসময় বিল্ড ফাইল ব্যবহার করতে ব্যবহার করেছি কিন্তু যেহেতু আমি শুরু আমার প্রথম nodejs প্রকল্প আমি ব্যবহার শুরু browserify । উজ্জীবিতকরণ এবং অন্যান্য অনুরূপ লাইব্রেরি সহ আপনার কোডটি আপনার বিল্ড ফাইল। আমি একটি ক্লায়েন্ট এবং সার্ভার লাইব্রেরির সুবিধা নিচ্ছি যা উভয়ই চলতে পারে তবে এটি খাঁটি ক্লায়েন্ট কোডের সাথেও কাজ করতে পারে। সংক্ষিপ্তসার হিসাবে ব্রাউজারফাই আপনাকে নোডে কোড লেখার সমস্ত সুবিধা দেয় (গ্লোবালগুলি এড়াতে কোনও আনোন ফাংশন, এনপিএম, সহজ প্রয়োজন) এবং এটি আপনাকে সেই কোডটি ক্লায়েন্টের সাথে একটি কমান্ড দিয়ে চালানোর জন্য এবং কেবল একটি ফাইল লোড করার জন্য প্যাকেজ করতে দেয়।

ব্রাউজারিফাইয়ের সাহায্যে আপনি যেমন কিছু করতে পারেন (নামযুক্ত অ্যাপ্লিকেশন.জেএস):

var MyLib = require('../myLib');

if(typeof window !== 'undefined') {
    window.MyLib = MyLib;
    window._ = require('underscore');
    window.$ = require('$');
    window.MyLib.myCan = require('./3rdParty/can/can');
}

ব্রাউজরিফাই অ্যাপ.জেএস> ক্লায়েন্ট.জেএস

যেমন কিছু উত্পাদন করতে হবে:

[function(require,module,exports){
    window.MyLib = //MyLib code
},
function(require,module,exports){
     window._ = //_ code
},
function(require,module,exports){
    window.$ = //$ code
},
function(require,module,exports){
    window.MyLib.myCan = //can code
}

আপনি যে ফাইলটি সংজ্ঞায়িত করবেন এটিতে আপনার সমস্ত তৃতীয় পক্ষের লিবস অন্তর্ভুক্ত থাকতে পারে এবং এটি ব্যবহার করে এমন কোনও আপনার বিকাশকারীদের সাথে সংঘর্ষ না ঘটায়।

- মন্তব্যে প্রতিক্রিয়া সম্পাদনা করুন (এবং প্রশ্নের সম্পূর্ণ মিস)

আমি অনুমান করি যে এটি আপনার নির্ভরতা এবং আপনি সমস্ত সংস্করণ এবং libs জুড়ে কাজ করে তা নিশ্চিত করার জন্য আপনি কতটা সময় ব্যয় করতে চান তা নির্ভর করে। যদি আপনার নির্ভরতাগুলি সাধারণ হয় এবং সংস্করণ থেকে সংস্করণে একই এপিআই অনুসরণ করে আপনি ব্যাকবোন রুটে যেতে পারেন এবং কেবলমাত্র ব্যবহারকারীকে $ এবং _ থাকতে হবে। আমি বান্ডিল ফাইলের অংশ হিসাবে আরও অস্পষ্ট লিবিস রাখার পরামর্শ দেব। বিকল্পগুলি কাটা এবং শুকিয়ে নিতে হবে না। আপনি একটি প্রাক-নির্মিত বা নিজের প্যাকেজ তৈরি করতে পারে।

Comments

ব্রাউজরিফাইয়ের জন্য +1, আরও বেশি লোককে সেই সরঞ্জামটি সম্পর্কে জানতে হবে

— বেনিয়ামিন গ্রুইনবাউম

@ বেনজামিন গ্রুয়েনবুম এটি একটি দুর্দান্ত সরঞ্জাম। আমি খুব ভাগ্যবান আমি আবার এটি পরীক্ষা করে দেখেছি। আমি প্রাথমিকভাবে এটিকে এড়ানো হয়েছিল কারণ এটি ফাইলগুলি async লোড করতে ব্যবহার করেছিল যা ব্রাউজারে N # ফাইল লোডকে ট্রিগার করতে পারে। এখন কেবলমাত্র একটি এবং উত্স মানচিত্র সক্ষম করা যেতে পারে।

— প্লী

দেখুন, এখানে সমস্যাটি রয়েছে - আমি একটি লাইব্রেরি কীভাবে প্রকাশ করব সে সম্পর্কে জিজ্ঞাসা করছি। আমি আসলে ব্রাউজারিফাই / ওয়ানজেএস / অন্যান্য কমনজেএস-ভিত্তিক সিস্টেমগুলি সম্পর্কে জানি তবে আমি যদি require()আমার কোড ব্যবহার করতে শুরু করি তবে এর অর্থ এটি ব্যবহারকারীদের কাছে আর অ্যাক্সেসযোগ্য হবে না যতক্ষণ না তারা খুব সাধারণ প্রকল্প ব্যবহার করার জন্য তাদের নিজস্ব প্রকল্প পরিবর্তন না করে। যদি আমি একটি সংকলিত স্ক্রিপ্ট প্রকাশ করি, তবে এটিতে তাদের নিজস্ব প্রকল্পের সাথে সম্ভাব্য নির্ভরতাগুলি রিডানডেন্ট অন্তর্ভুক্ত করা হবে এবং সম্ভাব্যরূপে প্রসারণযোগ্য (যেমন একাধিক জ্যাকেই) ব্লোট করা হবে।

— ইয়াং

Answer 2

ধরণের ক্লায়েন্ট-সাইড লাইব্রেরি:

1. ডিওএম স্পর্শ করে
2. ডোম স্পর্শ করে না

প্রথম ধরণের (ইউআই উইজেটস ইত্যাদি) দিয়ে, আপনি সাধারণত ধরে নেবেন যে jQuery উপস্থিত রয়েছে। আপনি "ডিওএম লাইব্রেরি অগ্নিস্টিক "ও লিখতে পারেন এবং এটি কম জনপ্রিয়দের সাথেও কাজ করতে পারেন তবে আমি বিরক্ত করি না।

দ্বিতীয় ধরনের সঙ্গে। প্রথমত, এটিকে jQuery প্লাগইন তৈরি করবেন না, উদাহরণস্বরূপ "jQuery কুকি প্লাগইন" হাস্যকর তবে এই জাতীয় লাইব্রেরি আসলে বিদ্যমান।

এই উভয় ধরণের কোনও নির্ভরতা, ছোট নির্ভরতা বা বিশাল নির্ভরতা থাকতে পারে - কোনও ডোম লাইব্রেরি এই অর্থে নির্ভরতা হিসাবে গণনা করছে না। প্রথম 2 দিয়ে, আপনি কেবল তাদের আপনার গ্রন্থাগারের স্কোপের মধ্যেই একত্রিত করবেন এবং সম্ভাব্য নকল সম্পর্কে চিন্তা করবেন না। উদাহরণস্বরূপ, jQuery একটি অভ্যন্তরীণ isArrayLikeফাংশনকে স্বীকার করে, যদিও ব্যবহারকারীর নিজস্ব কিছু র্যান্ডম ইউটিলিটি বেল্ট লাইব্রেরি থেকে ইতিমধ্যে অন্তর্ভুক্ত থাকতে পারে।

লাইব্রেরি (আসলে একটি ভাষা) বিকাশ করার সময় আমার কাছে কেবলমাত্র বিশাল নির্ভরতার সাথে একটি ব্যক্তিগত অভিজ্ঞতা রয়েছে - moment.js। এই ক্ষেত্রে আমি 2 টি বিল্ড সরবরাহ করব, একটি মুহুর্তের সাথে .js কনকানটেটেড এবং একটি ছাড়াই, যেখানে ব্যবহারকারী এটি অন্তর্ভুক্ত করার জন্য দায়বদ্ধ। যদিও এটি একটি ভাল সমাধান কিনা আমি জানি না।

এবং হ্যাঁ, প্রতিটি ক্ষেত্রে, সুনির্দিষ্টভাবে কাজ করে এমন একটি চূড়ান্ত বড় ফাইল তৈরির jQuery পদ্ধতির নেওয়া হয়। এর নীচে মডিউল বয়লারপ্লেট রয়েছে (প্রয়োজন / এএমডি / গ্লোবাল ইত্যাদি সনাক্তকরণ)।