ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট নির্ভরতা কীভাবে পরিচালনা করবেন? [বন্ধ]


96

যদিও সার্ভার সাইডে নির্ভরতা পরিচালনার জন্য দুর্দান্ত সমাধান রয়েছে তবে আমি কোনও সুসংগত ক্লায়েন্ট সাইড জাভাস্ক্রিপ্ট নির্ভরতা পরিচালন কার্যপ্রবাহের আমার সমস্ত চাহিদা পূরণ করে এমন কোনও সন্ধান করতে পারিনি। আমি এই 5 টি প্রয়োজনীয়তা পূরণ করতে চাই:

  1. একটি বিন্যাসে npm এর অনুরূপ আমার ক্লায়েন্ট সাইড নির্ভরতা পরিচালনা package.json বা আবাস এরbower.json
  2. dependency.jsonকম পরিচিত লাইব্রেরিগুলির জন্য আমার ফাইলে গিট রেপো বা আসল জেএস ফাইলগুলি (ওয়েব বা স্থানীয়ভাবে) point
  3. এটি এন্ডারের মতো সমস্ত লাইব্রেরিগুলিকে একটি একক ফাইলে সংক্ষিপ্ত করে নামকরণ করা উচিত - এটিই কেবলমাত্র জেএস ফাইল যা আমাকে <script>ক্লায়েন্টের পাশে আমার ট্যাগে রাখতে হবে
  4. এটি বক্সজেএস 4 (বর্তমানে মৃত) এর মতো কফিস্ক্রিপ্টের জন্য বাক্স সমর্থন ছাড়াই উচিত
  5. ব্রাউজারে, আমার প্রয়োজন হয় স্টাইলের প্রয়োজন হয় :

    var $ = require('jquery');
    var _ = require('underscore');
    

    বা আরও ভাল, Headjs শৈলী করুন:

    head.js(['jquery', 'underscore', 'mylib'], function($, _, mylib) {
      // executed when all libraries are loaded
    });
    

যদি এরকম কোনও একক সরঞ্জাম উপস্থিত না থাকে তবে সরঞ্জামগুলির সর্বোত্তম সংমিশ্রণটি কী কী একটি সরঞ্জাম-চেইন যা আমি ভোলো (বা গ্রান্ট ) এর মতো কিছু ব্যবহার করে একত্রিত করতে পারি ?

আমি এখানে লিঙ্কযুক্ত সমস্ত সরঞ্জামগুলি ইতিমধ্যে অনুসন্ধান করেছি এবং পৃথকভাবে তারা আমার প্রয়োজনীয়তাগুলির মধ্যে কেবল 3 টি পূরণ করে। সুতরাং, দয়া করে এই সরঞ্জামগুলি সম্পর্কে আবার পোস্ট করবেন না। আমি কেবলমাত্র এমন একটি উত্তরই গ্রহণ করব যা আমার একক সরঞ্জাম সরবরাহ করে যা আমার সমস্ত প্রয়োজনীয়তার 5 টি পূরণ করে বা যদি কোনও কন্ট্রাক্ট ওয়ার্কফ্লো / স্ক্রিপ্ট / একাধিক এ জাতীয় সরঞ্জামের সরঞ্জামচইনের উদাহরণ দেয় যা আমার সমস্ত প্রয়োজনীয়তাও পূরণ করে satisf ধন্যবাদ.


6
প্রয়োজনীয় js.org এর মতো কিছু ?
চন্দ্র শেখর ওয়ালাজাপেট

4
একটি আরো "নোড-শৈলী" সমাধান জন্য পোর্ট নোড এর যে requireব্রাউজারে সিনট্যাক্স বিবেচনা browserify
smithclay

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

4
আমি এখনো এটা চেষ্টা না কিন্তু সম্ভবত yeoman.io একজন ভাল প্রার্থী অত্যন্ত
Guillaume86

4
আমি মাত্র একজ সম্পর্কে শুনেছি - এটি কিছুটা সম্পর্কিত বলে মনে হচ্ছে: github.com/azer/onejs
dsummersl

উত্তর:


45

প্রয়োজনীয়.js আপনার যা যা প্রয়োজন সবকিছু করে।

এই প্রশ্নের আমার উত্তর আপনাকে সাহায্য করতে পারে

উদাহরণ:

ক্লায়েন্ট অ্যাপ্লিকেশন প্রকল্পের স্তরক্রম:

sampleapp
    |___ main.js
    |___ cs.js
    |___ require.js

মেইন.জেগুলি হ'ল যেখানে আপনি আপনার ক্লায়েন্ট অ্যাপ্লিকেশনটি আরম্ভ করেন এবং প্রয়োজনীয়. js কনফিগার করেন:

require.config({
    baseUrl: "/sampleapp",
    paths: {
        jquery: "libs/jquery", // Local
        underscore: "http://underscorejs.org/underscore-min.js", // Remote
        backbone: "https://github.com/documentcloud/backbone/blob/master/backbone-min.js" // Remote on github
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"] // Backbone depends on jquery and underscore
        }
    }
});

require(["cs!someCoffeescriptFile", "jquery", "backbone", "underscore"], function (SomeCoffeescriptFile, $, Backbone, _) {
    // Dependencies are loaded...
    // Execute code
});

"সিএস!" দ্বারা প্রেন্ডেন্ট করার সময় নির্ভরতাগুলি সিএস প্লাগইন ব্যবহার করবে । সিএস প্লাগইন কফিস্ক্রিপ্ট ফাইলটি সংকলন করে।

আপনি যখন প্রোডে যান, আপনি r.js দিয়ে আপনার পুরো প্রকল্পটি প্রাক-সংকলন করতে পারেন ।

node ./node_modules/requirejs/bin/r.js -o buildclientconfig.js

আপনার প্রয়োজনীয়তা এখানে:

  • এনএমপি'র প্যাকেজ.জসন বা বোভারের উপাদান.জসনের অনুরূপ ফর্ম্যাটে আমার ক্লায়েন্টের পার্শ্ব নির্ভরতাগুলি পরিচালনা করুন। ভিন্ন তবে এএস ভালো!

  • কম পরিচিত গ্রন্থাগারগুলির জন্য আমার dependence.json ফাইলে গিটি রেপো বা আসল জেএস ফাইলগুলিতে (ওয়েবে বা স্থানীয়ভাবে) ইঙ্গিত করার জন্য আমার নমনীয়তা থাকতে হবে (এনপিএম আসুন আপনি গিট রেপোতে নির্দেশ করুন)। হ্যাঁ

  • এটি এন্ডারের মতো সমস্ত লাইব্রেরিগুলিকে একটি একক ফাইলে সংক্ষিপ্ত করে নামকরণ করা উচিত - এটাই একমাত্র জেএস ফাইল যা আমাকে ক্লায়েন্টের পাশে আমার স্ক্রিপ্ট-ট্যাগে রাখতে হবে। হ্যাঁ r.js.

  • এটি বক্সের মতো কফিস্ক্রিপ্টের জন্য বাক্স সমর্থন ছাড়াই উচিত। হ্যাঁ

  • ব্রাউজারে আমি স্টাইল বা হেডজ প্রয়োজন হয় ব্যবহার করতে পারেন। হ্যাঁ


আমি যদি ব্যবহার করি তবে আমি r.jsকীভাবে সমস্ত লাইব্রেরির নন-মিনফাইড সংস্করণগুলি সহজেই টানতে পারি, বা কীভাবে আমি সংক্ষিপ্ত এবং নন-মাইনিফাইড লাইব্রেরির মধ্যে সিদ্ধান্ত নেব?
ডোমি

একমাত্র সমস্যা হ'ল এটির প্রয়োজনীয় জেএস ক্রেপ যা আপনাকে মিনিফাইড কোড সহ বহন করতে হবে।
প্রোনবার্ড

4
@ এখনও অগত্যা! পরিবর্তে আপনি বাদাম ব্যবহার করতে পারেন যা অনেক ছোট!
অ্যাডাম বি

24

http://requirejs.org/ হ'ল আপনি যা খুঁজছেন তা আমি বিশ্বাস করি


এর জন্য ধন্যবাদ. জানেন না যে এটি নোডেজের বাইরে রয়েছে
গটজ

4
ধন্যবাদ! আপনি যদি মনে করেন এটি উদ্দেশ্যটির সমাধান করেছে তবে দয়া করে আমার উত্তরটিকে সঠিক হিসাবে চিহ্নিত করুন!
চন্দ্র শেখর ওয়ালাজাপেট

4
আমি এই প্রশ্নটি এক্সডি জিজ্ঞাসা করি না তিনি
গটজ

ওহো দুঃখিত! বিজ্ঞপ্তি নেই
চন্দ্র শেখর ওয়ালাজাপেট

4
আমি দ্বিধান্বিত. কীভাবে প্রয়োজনগুলি ইন্টারনেট থেকে একটি স্বেচ্ছাসেবী জাভাস্ক্রিপ্ট ফাইলটি টানতে পারে (আমি এর রেপোগুলিতে জ্যাকুরির মতো নয়, তবে কম বিখ্যাত হিসাবে কথা বলছি)? এটি একটি প্যাকেজ.জসন ফাইলটি পড়তে পারে? এবং এটি কফিস্ক্রিপ্ট নিয়ে কাজ করে না ... আমি কি কিছু মিস করছি ??
pathikrit

15

@ গাইলাউমূম ৮৮ হিসাবে আমি মনে করি যে হেম আপনি যেদিকে যেতে চান তার নিকটতম স্থান পাবেন।

হেম নির্ভরতা এনএমপি এবং হেম সংমিশ্রণ ব্যবহার করে পরিচালনা করা হয়। আপনার সমস্ত প্রকল্পের বাহ্যিক নির্ভরতা সুস্পষ্টভাবে ইনস্টল করতে এনপিএম ব্যবহার করুন। কোন নির্ভরতা (বহিরাগত এবং স্থানীয় উভয়) আপনার ক্লায়েন্ট পাশ ক্রিয়াকলাপের জন্য একসাথে সেলাই করা উচিত তা নির্দিষ্ট করতে হেম ব্যবহার করুন।

আমি এটির একটি কঙ্কাল প্রকল্প তৈরি করেছি যাতে আপনি এটি কীভাবে কাজ করতে পারেন তা দেখতে পারেন - আপনি এটি https://github.com/dsummersl/clientsidehem এ দেখতে পারেন

নির্ভরতা যুক্ত করা হচ্ছে

নির্দিষ্ট নির্ভরতা সন্ধান করতে এনপিএম ব্যবহার করুন এবং তারপরে ভবিষ্যতে নির্ভরতাটি ট্র্যাক করা হয়েছে তা নিশ্চিত করার জন্য প্যাকেজ.জসন ফাইলটি সংশোধন করুন। তারপরে slug.json এ আপনার আবেদনের নির্ভরতা নির্দিষ্ট করুন।

উদাহরণস্বরূপ, ধরুন আপনি কফি-স্ক্রিপ্ট নির্ভরতা যুক্ত করতে চেয়েছিলেন। নির্ভরতা ইনস্টল করতে কেবল এনপিএম ব্যবহার করুন এবং এটি আপনার প্যাকেজ.জসন ফাইলে সংরক্ষণ করুন:

1. npm --save install coffee-script
2. Manually edit the slug.json file. Add "coffee-script" to "dependencies".

ধরুন আপনি নিজের মডিউল 'ব্লুমফিল্টারস' অন্তর্ভুক্ত করতে চেয়েছিলেন এবং এটি এনপিএম রেজিস্ট্রিতে ছিল না। আপনি নিম্নলিখিত প্রকল্পে এটি আপনার প্রকল্পে যুক্ত করতে পারেন:

1. npm --save install https://github.com/dsummersl/bloomfilters/tarball/master
2. Manually edit the slug.json file. Add "bloomfilters" to "dependencies".

স্থানীয় মডিউল

আপনি যদি নিজের কফি বা জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করতে চান তবে অ্যাপ্লিকেশন / ফোল্ডারে সেই ফাইলগুলি যুক্ত করে আপনি এটি করতে পারেন। নোট করুন যে আপনার স্ক্রিপ্টটি 'প্রয়োজনীয়' পদ্ধতির মাধ্যমে প্রকাশ করতে আপনাকে এটিকে একটি সাধারণ জেএস মডিউল তৈরি করতে হবে। এটি খুব সহজ - হেম ডক্স দেখুন

স্থানীয় ফাইল

আপনি যদি অ-সাধারণ জেএস নন 'প্রয়োজনীয়' কোড অন্তর্ভুক্ত করতে চান তবে আপনি নিজের কাস্টম জাভাস্ক্রিপ্ট বা কফিস্ক্রিপ্ট স্লাগ.জেসনে 'লিবস' তালিকার মাধ্যমে উল্লেখ করতে পারেন।

সিএসএস

আপনি চাইলে হেম আপনার সিএসএসকেও একসাথে সেলাই করবে। দেখুন পাড় ডক্স

বিল্ডিং

একবার আপনার নির্ভরতা তালিকাভুক্ত হয়ে গেলে আপনি সেগুলি একসাথে সেলাই করতে হেম ব্যবহার করতে পারেন।

# make sure all dependencies are present:
npm install .
# make public/application.js
hem build
# see your minified js in public/application.js

মন্তব্য

হেম স্পাইনজ প্রকল্পের জন্য বোঝানো হয়েছিল - তবে আপনাকে এটির জন্য এটি ব্যবহার করতে হবে না। আপনার ইচ্ছামতো মেরুদণ্ড উল্লেখ করে যে কোনও ডক্স উপেক্ষা করুন ...


4
বিশদে যাওয়ার প্রচেষ্টার জন্য +1;)
গিলাইউমূম

11

ঠিক আছে, আমি অবাক হয়েছি যে এখনও কেউ ব্রাউজারফিয়ের উল্লেখ করেনি।

  1. প্যাকেজ.জসন ফর্ম্যাট সমর্থন করে
  2. নীচে এনপিএম ব্যবহার করে যা গিথুব (বা কোনও গিট) রেপো প্যাকেজ উত্স হিসাবে ব্যবহার করতে পারে
  3. একক ফাইলে সমস্ত নির্ভরতা হ্রাস করে এবং সংযুক্ত করে।
  4. আপনি এটি নির্ভরতা মধ্যে অন্তর্ভুক্ত করা হলে coffeescript সমর্থন করে
  5. সমস্ত উপায় শৈলী প্রয়োজন।
  6. উত্স মানচিত্র সমর্থন করে

আপনি ব্রাউসরিফাইয়ের সাথে কোনও গিথুব রেপো (বা বোভার প্যাকেজ) ব্যবহার করতে পারেন? এর জন্য কি কিছু দরকার napaবা না দরকার? npmjs.org/package/napa
কনার

9

আমি নিশ্চিত যে হেম আপনার প্রয়োজনীয়তাগুলি পূরণ করে (আমি অতিরিক্ত সংকলক - জ্যাড এবং স্টাইলাস সহ ব্যক্তিগতকৃত কাঁটা ব্যবহার করি - এটি আপনার প্রয়োজন অনুসারে কাস্টমাইজ করা সহজ)। এটি অবনতিগুলি পরিচালনা করতে এনপিএম ব্যবহার করে।


এই বিশেষ প্রশ্নের পড়া থেকে আমার মনে হয় এটি বাক্সের বাইরে 1,3,5 কে বেশ ভাল সমাধান করে। # 2 এর জন্য আপনি নিজের স্থানীয় জেএস প্যাকেজগুলি নোড_মডিউলগুলিতে রাখতে পারেন (এটি স্থানীয় এনপিএম ব্যবহার করে) এবং আপনি কেবল গিটের উপর নির্ভরশীলতার জন্য গিট সাবমোডুল ব্যবহার করতে পারেন। # 4 এর জন্য আমি মনে করি যে আপনি হেম চালানোর আগে নিজেকে জেএস-তে কফি সংকলন করতে আটকে আছেন (যা সহজ)
dsummersl

মন্তব্যের জন্য ধন্যবাদ, কিন্তু পাড় সমস্যার কোনটা একটি coffeescript ভিত্তিক ফ্রেমওয়ার্ক তাই এটি এর একটি মৌলিক প্রয়োজন ছিল :), এটা প্রাথমিকভাবে Spine.js জন্য তৈরি করা হয়েছিল ছাড়া আমার coffeescript প্রনয়ন
Guillaume86

আমি বুঝতে পারি যে এটি অ্যাপ্লিকেশনগুলির মতো মেরুদণ্ডের জন্য হবে (যেমন অ্যাপ্লিকেশনটিতে কফি লাগানো / ...) তবে কফিস্ক্রিপ্টযুক্ত বহিরাগত মডিউলগুলির কী হবে? আমার মনে হয় রিক কী জিজ্ঞাসা করছে, তবে আমি সম্পূর্ণ ভুল হতে পারি ...
dsummersl

4
ঠিক আছে আমি জানি না এটি বাহ্যিক মডিউলগুলির জন্য কফিসিপিটি সংকলন করে কিনা তবে আমি মনে করি এটি কার্যকর নয়, বাহ্যিক মডিউলগুলি সাধারণত সংকলিত জেএস সরবরাহ করে :)
গিলাইউমূম

হ্যাঁ, আমি একমত এটি একটি কেকফিল / গ্রান্ট তৈরির রাজ্যে চলে যায় ...
dsummersl

5

আপনি ইয়োমনকে একবার দেখতে চাইতে পারেন , যা আপনাকে আপনার প্রয়োজনীয়তাগুলিতে সহায়তা করার জন্য বেশ কয়েকটি কৌশল ব্যবহার করে।

ওয়েব অ্যাপ তৈরির সময় আপনার উত্পাদনশীলতা এবং তৃপ্তির উন্নতির জন্য আমাদের ওয়ার্কফ্লোটি তিনটি সরঞ্জাম নিয়ে গঠিত: ইও (স্ক্যাফল্ডিং সরঞ্জাম), গ্রান্ট (বিল্ড টুল) এবং বোভার (প্যাকেজ পরিচালনার জন্য)।

কফিস্ক্রিপ্ট, কম্পাস এবং আরও অনেক কিছুর জন্য বিল্ড-ইন সমর্থন। R.js (প্রয়োজনীয় জেএস ), ইউনিটটেস্টিং ইত্যাদির সাথে কাজ করে

আপনার প্রয়োজনীয়তা হিসাবে:

  1. নির্ভরশীলতা পরিচালনার জন্য বোর ব্যবহৃত হয়
  2. বোর স্থানীয় ফাইল, গিট: //, http: // এবং আরও অনেক কিছু নিয়ে কাজ করতে পারে
  3. মিনিফিকেশন এবং কনটেনটেশনের জন্য বিল্ড-ইন সমর্থন (এমনকি আপনার চিত্রগুলির জন্য)
  4. কফিস্ক্রিপ্ট এবং কম্পাস (লাইভরেলোড সহ) স্বয়ংক্রিয়ভাবে সংকলনের জন্য বিল্ড-ইন সমর্থন
  5. যেমন বিল্ড প্রক্রিয়াতে বলা হয়েছে: আপনি যদি এএমডি ব্যবহার করেন তবে আমি সেই মডিউলগুলি r.js এর মাধ্যমে পাস করব যাতে আপনার দরকার নেই।

সমস্ত বৈশিষ্ট্য:

বাজ-দ্রুত স্ক্যাফোোল্ডিং - স্বনির্ধারিত টেম্পলেট (যেমন HTML5 বয়লারপ্লেট, টুইটার বুটস্ট্র্যাপ), প্রয়োজনীয় জেএস এবং আরও অনেকগুলি সহ সহজেই নতুন প্রকল্পগুলি মাপুন।

দুর্দান্ত বিল্ড প্রক্রিয়া - আপনি কেবলমাত্র সংক্ষিপ্তকরণ এবং সংক্ষিপ্তকরণ পান না; আমি আপনার সমস্ত চিত্র ফাইলগুলি, এইচটিএমএল, আপনার কফিস্ক্রিপ্ট এবং কম্পাস ফাইলগুলি সংকলন করতে অপ্টিমাইজ করি, আপনি যদি এএমডি ব্যবহার করেন তবে আমি সেই মডিউলগুলি r.js এর মাধ্যমে পাস করব যাতে আপনার দরকার নেই।

কফিস্ক্রিপ্ট এবং কম্পাস স্বয়ংক্রিয়ভাবে সংকলন করুন - আমাদের লাইভরেলোড ঘড়ি প্রক্রিয়া স্বয়ংক্রিয়ভাবে উত্স ফাইলগুলি সংকলন করে এবং যখনই কোনও পরিবর্তন আসে তখন আপনার ব্রাউজারটি সতেজ করে।

স্বয়ংক্রিয়ভাবে আপনার স্ক্রিপ্টগুলিকে লিঙ্ক করুন - আপনার সমস্ত স্ক্রিপ্টগুলি ভাষা সেরা অনুশীলনগুলি অনুসরণ করছে তা নিশ্চিত করার জন্য স্বয়ংক্রিয়ভাবে জেএসহিন্টের বিরুদ্ধে চালিত হয়।

অন্তর্নির্মিত পূর্বরূপ সার্ভার - আপনার নিজের এইচটিটিপি সার্ভারটি আর জ্বালিয়ে দেওয়া হবে না। আমার অন্তর্নির্মিতটিকে কেবল একটি কমান্ড দিয়ে বরখাস্ত করা যেতে পারে।

দুর্দান্ত চিত্র অপ্টিমাইজেশন - আমি আপনার সমস্ত চিত্র অপটিপিএনজি এবং জেপিজিটি ট্র্যান ব্যবহার করে অনুকূলিত করি যাতে আপনার ব্যবহারকারীরা সম্পদগুলি ডাউনলোড করতে কম সময় এবং আপনার অ্যাপ্লিকেশনটি ব্যবহার করতে আরও বেশি সময় ব্যয় করতে পারে।

খুনি প্যাকেজ পরিচালনা - নির্ভরতা প্রয়োজন? এটি কেবল একটি কীস্ট্রোক দূরে। আমি আপনাকে কমান্ড-লাইনের মাধ্যমে সহজেই নতুন প্যাকেজগুলি অনুসন্ধান করার অনুমতি দিই (যেমন search বোরার অনুসন্ধান জ্যাকোয়ারি), সেগুলি ইনস্টল করুন এবং আপনার ব্রাউজারটি খোলার প্রয়োজন ছাড়াই এগুলিকে আপডেট রাখুন।

ফ্যান্টমজেএস ইউনিট পরীক্ষা - খুব সহজেই ফ্যান্টমজেএসের মাধ্যমে আপনার ইউনিট পরীক্ষা হেডলেস ওয়েবকিটে চালান। আপনি যখন একটি নতুন অ্যাপ্লিকেশন তৈরি করেন, আমি আপনার অ্যাপ্লিকেশনের জন্য কিছু পরীক্ষার ভারাও অন্তর্ভুক্ত করি।


-1 এর জন্য কোনও মন্তব্য করবেন?
মার্কো

4

আবাস মামলা বাকি আপনি requirejs আছে তাদের জন্য আপনার চাহিদা (1) এবং (2) হতে পারে। রিডমি থেকে:

Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you.

একটি প্যাকেজ ইনস্টল করতে:

bower install jquery
bower install git://github.com/maccman/package-jquery.git
bower install http://code.jquery.com/jquery-1.7.2.js
bower install ./repos/jquery

আমি আমার ওপিতে (বাওয়ার সহ) সংযুক্ত সমস্তগুলি নিয়ে গবেষণা করেছি এবং তাদের কোনওটিই আমার 5 টি প্রয়োজনীয়তার মধ্যে 3 টিরও বেশি সন্তুষ্ট করতে ঘটেনি। আমি একটি একক সরঞ্জাম (বা সরঞ্জামগুলির সংমিশ্রণ) খুঁজছি যা আমার সমস্ত 5 টি সমস্যার সমাধান করবে।
প্যাথিক্রিট

জানি না যে এটি ডাউনটাওয়ে প্রাপ্য কিনা, আমি বলেছি যে বোর + ম্যাসেজ মাইজ আপনার প্রয়োজনের সাথে স্যুট করে। আপনি বলেছিলেন যে আপনি 'সরঞ্জামের সর্বোত্তম সমন্বয়' এর জন্যও উন্মুক্ত ছিলেন। আপনার সন্ধানের জন্য শুভকামনা
ব্যবহারকারী 18428

এর সাথে কী সমস্যা হয়েছে: (1) বোরও (2) এছাড়াও বোরও (3) জেজে বাজেট প্রয়োজন (4) আপনি ইতিমধ্যে নোড ইনস্টল করেছেন? (5 )jjs
ব্যবহারকারী 18428

2

জ্যাম প্যাকেজ ম্যানেজার । নীচে তার হোমপেজ থেকে বিবরণ দেওয়া হল

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

এটি কীভাবে কাজ করে তা এনপিএমের সাথে অনেকটা মিল বলে মনে হচ্ছে।

নীচের মত প্যাকেজ ইনস্টল করুন

jam install backbone

চালিয়ে প্যাকেজ আপ টু ডেট রাখার

jam upgrade
jam upgrade {package} 

উত্পাদন জন্য প্যাকেজ অনুকূল

jam compile compiled.min.js

জাম নির্ভরতা package.jsonফাইল যোগ করা যেতে পারে ।

সম্পূর্ণ ডকুমেন্টেশনের জন্য জাম ডকুমেন্টেশন পড়ুন


2

আমি সবেমাত্র ইনজেকশন.জেএস পেরিয়ে এসেছি

প্রকল্পের সাইট থেকে কিছু বৈশিষ্ট্য :

ইনজেকশন (অ্যাপাচি সফ্টওয়্যার লাইসেন্স ২.০) একটি লাইব্রেরি অগ্নোস্টিক উপায়ে আপনার নির্ভরতা পরিচালনার জন্য একটি বিপ্লবী উপায়। এর কয়েকটি প্রধান বৈশিষ্ট্যগুলির মধ্যে রয়েছে:

  • ব্রাউজারে কমনজেএস সম্মতি (রফতানি। *)
  • সম্পূর্ণ কমনজেএস সমর্থন ম্যাট্রিক্স দেখুন
  • ফাইলের ডোমেন পুনরুদ্ধার (ইজিজএক্সডিএমের মাধ্যমে)
  • লোকালস্টোরেশন (একবারে একটি মডিউল লোড করুন)

আমি ইনজেকশন পছন্দ করি এটি RequireJS এর ​​তুলনায় অনেক পরিষ্কার, এবং প্রায় নোড দিয়ে লেখার মতো।
মারডোক

1

কয়েকটি বিকল্প রয়েছে:

উপাদানগুলিও আগ্রহী হতে পারে, এটি প্রতি সেচ নির্ভরতা পরিচালনা করে না তবে অন্যথায় বড় লাইব্রেরির কাটা আপ সংস্করণ ব্যবহার করার অনুমতি দেয়।


1

আমি এনএমপি সহ হেম ব্যবহার করি এবং আমি কিছু অতিরিক্ত বেনিফিট যোগ করতে চেয়েছিলাম যা আমার মনে হয় এখনও পর্যন্ত আচ্ছাদিত হয়নি।

  • হেমের একটি স্ব-অন্তর্ভুক্ত ওয়েব সার্ভার (স্তর) রয়েছে যাতে আপনি পুনরায় সংযোগের প্রয়োজন ছাড়াই আপনার কোডটি বিকাশ করতে পারেন। আমি কোনও hem buildঅ্যাপ প্রকাশ না করা পর্যন্ত আমি কখনই ব্যবহার করি না ।
  • হেম ব্যবহারের জন্য আপনার স্পাইন.জেএস ব্যবহার করার দরকার নেই, আপনি যদি স্লাগ.জসনকে সঠিকভাবে সেট আপ করেন তবে আপনি এটি নির্বিচারে কফিস্ক্রিপ্ট প্যাকেজগুলি সংকলন করতে ব্যবহার করতে পারেন। এখানে আমার একটি প্যাকেজ যা কেকফাইলে স্বয়ংক্রিয়ভাবে সংকলিত হয়েছে: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
  • উপরের কথা বললে, হেম আপনাকে স্থানীয় সিস্টেমের অন্যান্য নির্ভরতাগুলি এনপিএম লিঙ্কের সাথে যুক্ত করতে দেয় এবং আপনি যখন স্ট্রটা সার্ভার ব্যবহার করছেন তখনও সেগুলি নির্বিঘ্নে একত্রিত করে। আসলে, আপনার cakeউপরের পদ্ধতিটি ব্যবহার করার দরকার নেই , আপনি নির্ভরশীল প্রকল্পগুলি থেকে সরাসরি কফিস্ক্রিপ্টের সাথে সরাসরি লিঙ্ক করতে পারেন।
  • হেম ecoসিএসএসের জন্য দর্শন এবং স্টাইলাসের জন্য (এম্বেডড কফিসিপিটি) সমর্থন করে এবং আপনার কফিস্ক্রিপ্ট সহ একটি জেএস এবং একটি সিএসএস ফাইলে সংকলন করে।

একটি মেরুদণ্ড, হেম, coffeescript অ্যাপ্লিকেশন দিয়ে সেট আপ করার জন্য এখানে একটি প্রাথমিক তালিকা। মেরুদণ্ডের অংশগুলি উপেক্ষা করে নির্দ্বিধায়। প্রকৃতপক্ষে, কখনও কখনও আমি spine appএকটি স্পাইনবিহীন অ্যাপের জন্য ডিরেক্টরি কাঠামো সেটআপ করতে ব্যবহার করি , তারপরে slug.jsonএকটি পৃথক সংকলন কাঠামোতে পরিবর্তন করতে সম্পাদনা করুন ।

  1. এনপিএম ইনস্টল করুন: curl http://npmjs.org/install.sh | shএকটি * নিক্স সিস্টেমে। আমি ধরে নেব এটি কমান্ড লাইন থেকে উপলব্ধ।
  2. বিশ্বব্যাপী হেম ইনস্টল করুন ( npm install -g hem)। বিকাশ দেরিতে হয়েছে তাই আপনি এটিকে সরাসরি গিথুব ( https://github.com/spine/hem ) থেকে বের করতে, একটি শাখা চেক আউট করতে npm install -g .এবং সেই ফোল্ডারে দেখতে চাইতে পারেন।
  3. npm install -g spine.app গ্লোবাল কমান্ড হিসাবে মেরুদণ্ড উপলব্ধ করা হবে
  4. spine app folderনামক একটি মেরুদন্ড প্রকল্পের করতে হবে appসালে folderশুরু করতে, ডান ডিরেক্টরি গঠন এবং কঙ্কাল ফাইলের একটি গুচ্ছ উৎপাদিত।
  5. cddependencies.jsonআপনার প্রয়োজনীয় লাইব্রেরিগুলির জন্য ফোল্ডার এবং সম্পাদনা করতে। slug.jsonএগুলিতে যুক্ত করুন যাতে হেম জানে যে তাদের পাশাপাশি কোথায় পাবে।
  6. Alচ্ছিক: npm linkআপনার স্থানীয় প্যাকেজগুলির বিকাশে node_modulesএবং আপনি সেগুলি slug.jsonহেমের জন্য যুক্ত করতে পারেন (হয় হ'ল index.jsএটি অন্তর্ভুক্ত করতে হয় index.coffeeঅথবা আপনি যদি হেম এটি সংকলন করতে চান তবে তা যোগ করতে পারেন))
  7. npm install . আপনি সন্নিবেশিত সমস্ত নির্ভরতা ডাউনলোড করতে।
  8. আপনি যদি ডিফল্ট মেরুদণ্ডের কনফিগারটি একবার দেখে থাকেন তবে এমন একটি জায়গা রয়েছে app/lib/setup.coffeeযেখানে requireআপনার নির্ভরতাগুলি থেকে আপনার সমস্ত লাইব্রেরিগুলি প্রয়োজন। উদাহরণ:

    # Spine.app had these as dependencies by default
    require('json2ify')
    require('es5-shimify')
    require('jqueryify')
    
    require('spine')
    require('spine/lib/local')
    require('spine/lib/ajax')
    require('spine/lib/manager')
    require('spine/lib/route')
    
    # d3 was installed via dependencies.json
    require 'd3/d3.v2'
    
  9. ইন index.coffee, আপনি ঠিক require lib/setupএবং আপনার অ্যাপ্লিকেশনের জন্য প্রধান নিয়ামক লোড করুন। তদ্ব্যতীত, requireএই অন্যান্য নিয়ামকদের আপনার অন্য কোনও ক্লাসের প্রয়োজন । আপনি নিয়ামক এবং মডেলগুলির জন্য টেমপ্লেটগুলি ব্যবহার করতে spine controller somethingবা spine model somethingতৈরি করতে পারেন । টিপিক্যাল স্পাইন কন্ট্রোলার নোড ব্যবহার করে নীচের মত দেখতে লাগে require:

    Spine = require('spine')
    # Require other controllers
    Payment = require('controllers/payment')
    
    class Header extends Spine.Controller
      constructor: ->
        # initialize the class
    
      active: ->
        super
        @render()
    
      render: ->
        # Pull down some eco files
        @html require('views/header')   
    
    # Makes this visible to other controllers    
    module.exports = Header
    
  10. উত্সাহিত ডিফল্টটি index.htmlসাধারণত আপনার অ্যাপ্লিকেশন লোড করার জন্য ঠিক থাকবে তবে প্রয়োজনীয় হিসাবে সংশোধন করুন। আপনার প্রয়োজনীয়তা অনুযায়ী, এটি কেবল একটি jsএবং একটি cssফাইলে টান দেয় , যা আপনাকে কখনই সংশোধন করার প্রয়োজন হয় না।

  11. cssফোল্ডারে আপনার স্টাইলাস ফাইলগুলি প্রয়োজনীয় হিসাবে সম্পাদনা করুন । এটি CSS এর চেয়ে অনেক বেশি নমনীয় :)
  12. থেকে folder, hem serverএকটি হেম সার্ভার শুরু করতে চালান , এবং localhost:9294আপনার অ্যাপ্লিকেশনটি দেখতে নেভিগেট করুন। (যদি আপনি বিশ্বব্যাপী হেম ইনস্টল করেন)) এর কিছু লুকানো যুক্তি রয়েছে, উদাহরণস্বরূপ --host 0.0.0.0সমস্ত পোর্টে শোনা ।
  13. যথাযথ এমভিসি কৌশল ব্যবহার করে আপনার বাকী অ্যাপ্লিকেশন তৈরি করুন এবং সিএসএসের জন্য স্টাইলাস এবং দর্শনের জন্য ইকো ব্যবহার করুন। বা স্পাইন মোটেও ব্যবহার করবেন না, এবং হেম এখনও কফিস্ক্রিপ্ট এবং এনপিএম দিয়ে দুর্দান্ত কাজ করবে। উভয় মডেল ব্যবহার করে প্রকল্পের অনেক উদাহরণ রয়েছে।

আরও একটি জিনিস: সাধারণত hem serverআপনি নিজের কোড আপডেট করার সাথে সাথে ফাইলগুলি সংরক্ষণ করার সাথে সাথে স্বয়ংক্রিয়ভাবে আপডেট হবে যা এটি ডিবাগ করার জন্য একটি সিঞ্চ তৈরি করে। চলমান hem buildআপনার অ্যাপ্লিকেশনটিকে দুটি ফাইলে সংকলন করবে application.js, যা মাইনযুক্ত এবং application.css। আপনি যদি এর hem serverপরে চালনা করেন তবে এটি সেই ফাইলগুলি ব্যবহার করবে এবং আর স্বয়ংক্রিয়ভাবে আপডেট হবে না। hem buildআপনার স্থাপনার জন্য আপনার অ্যাপ্লিকেশনটির একটি সংক্ষিপ্ত সংস্করণ প্রয়োজন না হওয়া পর্যন্ত না don't

অতিরিক্ত রেফারেন্স: স্পাইন.জেএস এবং হেম শুরু হচ্ছে


1

এখানে একটি সমাধান যা একেবারে ভিন্ন পদ্ধতির গ্রহণ করে: সমস্ত মডিউলকে একটি JSON অবজেক্টে প্যাকেজ করুন এবং অতিরিক্ত অনুরোধ ছাড়াই ফাইল সামগ্রী পড়া এবং সম্পাদন করে মডিউলগুলি প্রয়োজন।

খাঁটি ক্লায়েন্টাইড ডেমো বাস্তবায়ন: http://strd6.github.io/editor/

https://github.com/STRd6/require/blob/master/main.coffee.md

স্ট্র্যাড require / প্রয়োজনীয়তা রানটাইমে উপলব্ধ জেএসএন প্যাকেজ থাকার উপর নির্ভর করে। requireফাংশন যা প্যাকেজের জন্য উৎপন্ন হয়। প্যাকেজটিতে আপনার অ্যাপ্লিকেশনটির প্রয়োজনীয় সমস্ত ফাইল রয়েছে। আর কোনও HTTP অনুরোধ করা হয়নি কারণ প্যাকেজটি সমস্ত নির্ভরতা বান্ডিল করে। এটি ক্লায়েন্টের জন্য প্রয়োজনীয় নোড.জেএস স্টাইলে পৌঁছানোর মতোই কাছাকাছি।

প্যাকেজের কাঠামোটি নিম্নরূপ:

entryPoint: "main"
distribution:
  main: 
    content: "alert(\"It worked!\")"
  ...
dependencies:
  <name>: <a package>

নোডের বিপরীতে কোনও প্যাকেজ এটির বাহ্যিক নাম জানেন না। এটি নামকরণের নির্ভরতা সহ প্যাক্কেজের উপর নির্ভর করে। এটি সম্পূর্ণ এনক্যাপসুলেশন সরবরাহ করে।

এখানে সমস্ত সেটআপ দেওয়া একটি ফাংশন যা কোনও প্যাকেজের মধ্যে থেকে কোনও ফাইল লোড করে:

loadModule = (pkg, path) ->
  unless (file = pkg.distribution[path])
    throw "Could not find file at #{path} in #{pkg.name}" 

  program = file.content
  dirname = path.split(fileSeparator)[0...-1].join(fileSeparator)

  module =
    path: dirname
    exports: {}

  context =
    require: generateRequireFn(pkg, module)        
    global: global
    module: module
    exports: module.exports
    PACKAGE: pkg
    __filename: path
    __dirname: dirname

  args = Object.keys(context)
  values = args.map (name) -> context[name]

  Function(args..., program).apply(module, values)

  return module

এই বাহ্যিক প্রসঙ্গটি কিছু পরিবর্তনশীল সরবরাহ করে যা মডিউলগুলির অ্যাক্সেস রয়েছে।

কোনও requireফাংশন মডিউলগুলির সংস্পর্শে আসে যাতে তাদের অন্যান্য মডিউলগুলির প্রয়োজন হতে পারে।

অতিরিক্ত বৈশিষ্ট্য যেমন গ্লোবাল অবজেক্টের রেফারেন্স এবং কিছু মেটাডেটাও প্রকাশিত হয়।

পরিশেষে আমরা মডিউল এবং প্রদত্ত প্রসঙ্গের মধ্যে প্রোগ্রামটি কার্যকর করি।

এই উত্তরটি তাদের পক্ষে সবচেয়ে সহায়ক হবে যারা একটি সিঙ্ক্রোনাস নোড.জেএস স্টাইলটি ব্রাউজারে বিবৃতি প্রয়োজন এবং দূরবর্তী স্ক্রিপ্ট লোডিং সমাধানগুলিতে আগ্রহী নন।



0

আমি ডোজো টুলকিট যা আপনার বেশিরভাগ প্রয়োজনীয়তা পূরণ করে বলে মনে হচ্ছে তা পরীক্ষা করে নেওয়ার পরামর্শ দেব । আমি যে সম্পর্কে নিশ্চিত নই সে হ'ল কফিস্ক্রিপ্ট।

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

http://dojotoolkit.org/ ডকুমেন্টেশন / টিউটোরিয়ালস / 1.8 / বিল্ড /

রেকর্ডের জন্য, v1.9 বিটা আগামী মাসে প্রত্যাশিত।


0

আরেকটি কাঠামো যা আমার প্রকাশিত সমস্ত মানদণ্ডকে সন্তুষ্ট করে: http://duojs.org/ (এবং সিএসএসের মতো অন্যান্য সংস্থানগুলিকে নির্ভরতা হিসাবে বিবেচনা করে সমর্থন করে)।


0

অ্যাসিনক্রোনাস লোডিং + ব্রাউজারফ্রাইয়ের সাথে নির্ভরতা ইনজেকশন আরও ভাল পছন্দ হবে, প্রয়োজনীয় সংস্থাগুলির সাথে তুলনা করে

অ্যাসিঙ্ক্রোনাস-ফ্রন্টএন্ড-নির্ভরতা-পরিচালনা-এএমডি ছাড়াই


4
এটি একটু বিরল। এখানে আরও উত্তর অন্তর্ভুক্ত করা ভাল , এবং রেফারেন্সের জন্য লিঙ্কটি সরবরাহ করা ভাল।
নাথান টগি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.