প্রয়োজনীয় জেএস ব্যবহার করে ব্যাকবোন এবং অ্যান্ডস্কোর লোড হচ্ছে

Question

আমি প্রয়োজনীয় জেএস এর সাথে ব্যাকবোন এবং অ্যান্ডসোর (পাশাপাশি jQuery) লোড করার চেষ্টা করছি। ব্যাকবোন এবং অ্যান্ডস্কোরের সর্বশেষতম সংস্করণগুলির সাথে এটি এক ধরণের কৃপণ বলে মনে হচ্ছে। একটির জন্য, অ্যান্ডস্কোর স্বয়ংক্রিয়ভাবে একটি মডিউল হিসাবে নিজেকে নিবন্ধিত করে, তবে ব্যাকবোন ধরে নেয় বিশ্বব্যাপী ইনসডোর উপলব্ধ। আমার এও লক্ষ্য করা উচিত যে ব্যাকবোন নিজেকে মডিউল হিসাবে নিবন্ধিত করে না বলে মনে হয় যা এটি অন্য লিবগুলির সাথে একরকম অসঙ্গতিপূর্ণ করে তোলে। এটি সেরা মেইন.জেস আমি সেই কাজগুলি নিয়ে আসতে পারি:

require(
{
    paths: {
        'backbone': 'libs/backbone/backbone-require',
        'templates': '../templates'
    }
},
[
    // jQuery registers itself as a module.
    'http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js',

    // Underscore registers itself as a module.
    'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.1/underscore-min.js'
], function() {

    // These nested require() calls are just due to how Backbone is built.  Underscore basically says if require()
    // is available then it will automatically register an "underscore" module, but it won't register underscore
    // as a global "_".  However, Backbone expects Underscore to be a global variable.  To make this work, we require
    // the Underscore module after it's been defined from within Underscore and set it as a global variable for
    // Backbone's sake.  Hopefully Backbone will soon be able to use the Underscore module directly instead of
    // assuming it's global.
    require(['underscore'], function(_) {
        window._ = _;
    });

    require([
        'order!http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js',
        'order!app'
    ], function(a, app) {
        app.initialize();
    })
});

আমার এটি উল্লেখ করা উচিত, যখন এটি কাজ করে, অপ্টিমাইজারটি এতে চাপ দেয়। আমি নিম্নলিখিত প্রাপ্ত:

Tracing dependencies for: main
js: "/home/httpd/aahardy/requirejs/r.js", line 7619: exception from uncaught JavaScript throw: Error: Error: Error evaluating module "undefined" at location "/home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js":
JavaException: java.io.FileNotFoundException: /home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js (No such file or directory)
fileName:/home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js
lineNumber: undefined
http://requirejs.org/docs/errors.html#defineerror
In module tree:
    main

এটি পরিচালনা করার আরও ভাল উপায় আছে? ধন্যবাদ!

Comments

আপনি কোন টিউটোরিয়াল ব্যবহার করে এটি করেছেন?

— কাহা

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

— অ্যারনিয়াস

আমি অন্যান্য লাইব্রেরি এবং তদ্বিপরীতগুলির সাথে প্রয়োজনীয় ব্যবহারগুলিও কঠিন পেয়েছি। এ কারণেই আমি একটি লাইব্রেরি তৈরি করেছি যা ব্যবহার করা আরও সহজ এবং কৌনিক দ্বারা পরীক্ষা করা হয়। নীচে একটি ডেমো অ্যাপ্লিকেশন রয়েছে: gngeorgiev.github.io/Modulerr.js আপনি Modulerr.js এর নির্ভরতা ছাড়াই সমস্ত স্ক্রিপ্টকে এক সাথে সংযুক্ত করতে পারেন

— জর্জি - এটি

বিটিডব্লিউ সিঙ্ক্রোনাস অ্যাসিঙ্ক্রোনাস মডিউল

— সংজ্ঞাটি কিন্ডা অক্সিমোরন

হা! ভাল যুক্তি. সম্পাদনা করা হয়েছে।

— অ্যারনিয়াস

Answer 1

প্রয়োজনীয় জেএস ২. এক্স এখন নতুন shimকনফিগারেশন ব্যবহার করে ব্যাকবোন ও ইনডকোরের মতো অ-এএমডি মডিউলগুলিকে জৈবিকভাবে সম্বোধন করে ।

shimকনফিগারেশন ব্যবহার করা সহজ হয়: (1) এক যুক্তরাষ্ট্রের নির্ভরতা ( deps), যদি থাকে, (থেকে হতে যা করতে পারে pathsকনফিগারেশন, অথবা বৈধ পাথ নিজেদের হতে পারে)। (২) (allyচ্ছিকভাবে) আপনি যে শিমিং করছেন ফাইলটি থেকে বিশ্বব্যাপী পরিবর্তনশীল নাম উল্লেখ করুন যা আপনার প্রয়োজনীয় মডিউল ফাংশনে রফতানি করা উচিত। (আপনি যদি রফতানি নির্দিষ্ট না করেন, তবে আপনাকে কেবল গ্লোবাল ব্যবহার করতে হবে, কারণ আপনার প্রয়োজনীয় / সংজ্ঞায়িত কার্যগুলিতে কিছুই প্রবেশ করবে না))

shimব্যাকবোন লোড করতে এখানে একটি সাধারণ উদাহরণ ব্যবহার । এটি আন্ডারস্কোরের জন্য একটি রফতানিও যুক্ত করে, যদিও এর কোনও নির্ভরতা নেই।

require.config({
  shim: {
    underscore: {
      exports: '_'
    },
    backbone: {
      deps: ["underscore", "jquery"],
      exports: "Backbone"
    }
  }
});

//the "main" function to bootstrap your code
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone) {   // or, you could use these deps in a separate module using define

});

^{দ্রষ্টব্য: এই সরলীকৃত কোডটি ধরে নিয়েছে যে jquery, ব্যাকবোন এবং আন্ডারস্কোর এই "প্রধান" কোড হিসাবে একই ডিরেক্টরিতে "jquery.js", "backbone.js" এবং "আন্ডারস্কোর.জেএস" নামের ফাইলগুলিতে রয়েছে (যা প্রয়োজনীয়তার জন্য বেসলাইআরএল হয়ে যায়) )। যদি এটি না হয় তবে আপনাকে পাথ কনফিগার করতে হবে ।}

আমি ব্যক্তিগতভাবে অন্তর্নির্মিত shimকার্যকারিতা দিয়ে মনে করি , ব্যাকবোন এবং অ্যান্ডস্কোরের একটি কাঁটাযুক্ত সংস্করণ ব্যবহার না করার সুবিধাগুলি অন্যান্য জনপ্রিয় উত্তরে প্রস্তাবিত এএমডি কাঁটাচামচ ব্যবহারের সুবিধাগুলি ছাড়িয়ে যায়, তবে উভয় দিকই কার্যকর হয়।

Comments

এই কোডটি কি প্রয়োজনীয় Sample RequireJS 2.0.1 + jQuery 1.7.2 project js.org/docs/download.html#samplejquery ব্যবহার করা উচিত ?

— হেনরি

যদি আমি আপনাকে সঠিকভাবে বুঝতে পারি, হেনরি, আপনি জিজ্ঞাসা করছেন $ প্লাগইনগুলির জন্য শিম প্রয়োজনীয় whether এটি যদি হয় না, আপনি যদি সেই নমুনা প্রকল্প থেকে সম্মিলিত প্রয়োজনীয়-jquery.js ফাইলটি ব্যবহার করেন। এটি কারণ হিসাবে সম্মিলিত ফাইলের সাথে, jquery সিঙ্ক্রোনালিভাবে প্রয়োজনীয়তার সাথে লোড হয়ে যায়, তাই আপনি কোনও মডিউলে কোনও $ প্লাগইন ব্যবহার করার চেষ্টা করার সাথে সাথে jquery লোড হওয়ার গ্যারান্টিযুক্ত। এই ক্ষেত্রে, আপনি যখন $ প্লাগইনগুলি ব্যবহার করতে চান, আপনি কেবল তাদের নির্ভরতা তালিকায় এগুলি অন্তর্ভুক্ত করতে পারেন যেন তারা এএমডি হয়, এমনকি না থাকলেও। এটি অবশ্যই নিয়মের ব্যতিক্রম এবং সাধারণত আপনার কোনও অ-এএমডি মডিউলগুলির জন্য শিম দরকার।

— বেন রবার্টস

নোট করুন যে শিম কফিগ্রেশনটি সেই নমুনা প্রকল্পের সাথে সামঞ্জস্যপূর্ণ এবং অন্যান্য নন-এএমডি লাইব্রেরি যুক্ত করতে ব্যবহৃত হতে পারে।

— বেন রবার্টস

কেবল ভেবেছি আমি উল্লেখ করব যে এটিই সত্যই যাওয়ার উপায়, আমি যদি এটি # 1 উত্তর হয়ে উঠতে +50 upvotes দিতে পারি।

— কোবলাস

এই উত্তরের পদ্ধতিটি আশাব্যঞ্জক লাগছিল, তবে আমার পক্ষে কার্যকর হয়নি। পরিবর্তে আমি gist.github.com/2517531 ব্যবহার করেছি, যা ভাল কাজ করেছে।

— রব ডব্লু

Answer 2

আপডেট : সংস্করণ 1.3.0 অনুসারে অ্যান্ডস্কোর এএমডি সরানো (প্রয়োজনীয় জেএস) সমর্থন ।

আপনি জেমস বার্কের (AMDJS র রক্ষণাবেক্ষণকারী) সহায়তার সাহায্যে amdjs / backbone 0.9.1 এবং amdjs / અડডোর 1.3.1 কাঁটাচামচ ব্যবহার করতে পারেন ।

অ্যান্ডস্কোর এবং ব্যাকবোনগুলির জন্য এএমডি সমর্থন সম্পর্কে আরও তথ্য ।

// main.js using RequireJS 1.0.7
require.config({
    paths: {
        'jquery': 'libs/jquery/1.7.1/jquery',
        'underscore': 'libs/underscore/1.3.1-amdjs/underscore', // AMD support
        'backbone': 'libs/backbone/0.9.1-amdjs/backbone', // AMD support
        'templates': '../templates'
    }
});

require([
    'domReady', // optional, using RequireJS domReady plugin
    'app'
], function(domReady, app){
    domReady(function () {
        app.initialize();
    });
});

মডিউলগুলি যথাযথভাবে নিবন্ধিত হয়েছে এবং অর্ডার প্লাগইনের কোনও প্রয়োজন নেই:

// app.js
define([
    'jquery', 
    'underscore',
    'backbone'
], function($, _, Backbone){
    return {
        initialize: function(){
            // you can use $, _ or Backbone here
        }
    };
});

ইন্ডসকোর আসলে alচ্ছিক, কারণ ব্যাকবোন এখন তার নিজের উপর নির্ভরশীলতা অর্জন করে:

// app.js
define(['jquery', 'backbone'], function($, Backbone){
    return {
        initialize: function(){
            // you can use $ and Backbone here with
            // dependencies loaded i.e. Underscore
        }
    };
});

কিছু এএমডি চিনির সাহায্যে আপনি এটিও এভাবে লিখতে পারেন:

define(function(require) {
    var Backbone = require('backbone'),
        $ = require('jquery');

    return {
        initialize: function(){
            // you can use $ and Backbone here with
            // dependencies loaded i.e. Underscore
        }
    };
});

অপ্টিমাইজার ত্রুটি সম্পর্কিত: আপনার বিল্ড কনফিগারেশনটি ডাবল চেক করুন। আমি ধরে নিলাম আপনার পথের কনফিগারেশনটি বন্ধ রয়েছে। আপনার যদি প্রয়োজনীয় জেএস ডক্সের মতো ডিরেক্টরি সেটআপ থাকে তবে আপনি ব্যবহার করতে পারেন:

// app.build.js
({
    appDir: "../",
    baseUrl: "js",
    dir: "../../ui-build",
    paths: {
        'jquery': 'libs/jquery/1.7.1/jquery',
        'underscore': 'libs/underscore/1.3.1-amdjs/underscore',
        'backbone': 'libs/backbone/0.9.1-amdjs/backbone',
        'templates': '../templates'
    }, 
    modules: [
        {
            name: "main"
        }
    ]
})

Comments

ঠিক এটাই আমি খুঁজছিলাম। ধন্যবাদ! দুর্দান্ত বিস্তারিত উত্তরও। আপনার বর্ণনা অনুসারে এটি এখন চলছে।

— অ্যারনিয়াস

+1 নির্ভুল, কার্যকারী এবং আপডেট উত্তর + উদাহরণ। চমৎকার কাজ রিবেল, আপনি আমাকে সাহায্য করেছেন এবং আমি নিশ্চিত অন্যরাও অনেক কিছু।

— কেন

মূল পোস্টের অনেক পরে এই আপডেট করার জন্য সুপার বোনাস।

— অ্যারনিয়াস

দুর্দান্ত উত্তর @ রিবেল! এটা সত্যিই আমার কাজে লাগছে। বিটিডব্লিউ, আমিও ভোলোর দিকে নজর দেওয়ার পরামর্শ দেব । গিথুব থেকে নির্ভরতা পুনরুদ্ধার করতে এটি jrburke (প্রয়োজনীয়js এর স্রষ্টা) দ্বারা তৈরি একটি গ্রন্থাগার। উদাহরণস্বরূপ আন্ডারস্কোর এর এমডি সংস্করণটি পুনরুদ্ধার করা কেবল টাইপিংয়ের কাজটি করা হয়েছে: ভলো অ্যাড আন্ডারস্কোর

— txominpelu

Answer 3

রেফারেন্সের জন্য, সংস্করণ 1.1.1 (ফেব্রুয়ারী '13) হিসাবে, ব্যাকবোন একটি এএমডি মডিউল হিসাবে নিজেকে নিবন্ধিত করে । এটি এর শিম কনফিগার ব্যবহার না করে প্রয়োজনীয়js এর সাথে কাজ করবে। ( জেমস বার্কের এমডিজেস ফর্কটিও 1.1.0 এর পরে আপডেট করা হয়নি)

Answer 4

সুসংবাদ, অ্যান্ডস্কোর ১.6.০ এখন প্রয়োজনীয় সংজ্ঞাগুলি সমর্থন করে !!!

এর নীচের সংস্করণগুলিতে শিমগুলির প্রয়োজন হয়, বা আন্ডারস্কোর প্রয়োজন হয় (জাজস) এরপরে অন্ধভাবে আশা করা যায় যে "_" গ্লোবাল ভেরিয়েবল হ্যাশটি কেটে ফেলা হবে না (যা নিখরচায় হতে পারে তা মোটামুটি বাজি)

কেবল এটি দ্বারা লোড করুন

  requirejs.config({
    paths: {
        "underscore": "PATH/underscore-1.6.0.min",
    }
  });

Answer 5

আমি সরাসরি লিখব, আপনি প্রয়োজনীয়js.org এর ব্যাখ্যাটি পড়তে পারেন, আপনি নীচের কোডটি আপনার প্রতিদিনের ব্যবহারের জন্য স্নিপেট হিসাবে ব্যবহার করতে পারেন; (পিএস আমি ইওমেন ব্যবহার করি) (যেহেতু অনেকগুলি বিষয় আপডেট হয়েছে, ফেব্রুয়ারী ২০১৪ হিসাবে এটি পোস্ট করছি))

নিশ্চিত হয়ে নিন যে আপনি স্ক্রিপ্টটি আপনার সূচিপত্রের মধ্যে অন্তর্ভুক্ত করেছেন t

<!-- build:js({app,.tmp}) scripts/main.js -->
<script data-main="scripts/main" src="bower_components/requirejs/require.js"></script>
<!-- endbuild -->

তারপরে, main.js এ

require.config({
    shim: {
        'backbone': {
            deps: ['../bower_components/underscore/underscore.js', 'jquery'],
            exports: 'Backbone'
        }
    },

    paths: {
        jquery: '../bower_components/jquery/jquery',
        backbone: '../bower_components/backbone/backbone'
    }
});

require(['views/app'], function(AppView){
    new AppView();
});

app.js

/**
 * App View
 */
define(['backbone', 'router'], function(Backbone, MainRouter) {
    var AppView = Backbone.View.extend({
        el: 'body',

        initialize: function() {
            App.Router = new MainRouter();
            Backbone.history.start();
        }
    });

    return AppView;
});

আমি আশা করি আমি দরকারী ছিল।!

Comments

আপনি জানতে চেয়ে বেশি দরকারী। আমার, বওয়ার_কম্পোন্টস এবং সমস্ত কিছুর একটি প্রকল্পের জন্য আমি এটি তৈরির চেষ্টা করেছি। ধন্যবাদ @ এসটিইএল

— ডুইট স্পেন্সার

Answer 6

require.config({
  waitSeconds: 500,
  paths: {
    jquery: "libs/jquery/jquery",
    jqueryCookie: "libs/jquery/jquery.cookie",
    .....
  },

  shim: {
    jqxcore: {
      export: "$",
      deps: ["jquery"]
    },
    jqxbuttons: {
      export: "$",
      deps: ["jquery", "jqxcore"]
    }
    ............
  }
});

require([
 <i> // Load our app module and pass it to our definition function</i>
  "app"
], function(App) {
  // The "app" dependency is passed in as "App"
  // Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function
  App.initialize();
});