Tải xương sống và gạch dưới bằng RequireJS

Tôi đang cố tải Backbone và Underscore (cũng như jQuery) bằng RequireJS. Với các phiên bản mới nhất của Backbone và Underscore, nó có vẻ khó khăn. Đối với một, Underscore tự động đăng ký chính nó như một mô-đun, nhưng Backbone giả định Underscore có sẵn trên toàn cầu. Tôi cũng nên lưu ý rằng Backbone dường như không đăng ký chính nó như là một mô-đun khiến nó không phù hợp với các lib khác. Đây là main.js tốt nhất tôi có thể làm với nó hoạt động:

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();
    })
});

Tôi nên đề cập rằng, trong khi nó hoạt động, trình tối ưu hóa cuộn cảm với nó. Tôi nhận được như sau:

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

Có cách nào tốt hơn để xử lý này? Cảm ơn!

RequireJS 2.X hiện đang xử lý một cách hữu cơ các mô-đun không phải AMD như Backbone & Underscore tốt hơn nhiều, sử dụng shimcấu hình mới .

Các shimcấu hình là đơn giản để sử dụng: (1) một khẳng định sự phụ thuộc ( deps), nếu có, (có thể là từ các pathscấu hình, hoặc có thể là con đường hợp lệ bản thân). (2) (tùy chọn) chỉ định tên biến toàn cục từ tệp bạn đang làm mờ, sẽ được xuất sang các chức năng mô-đun của bạn yêu cầu nó. (Nếu bạn không chỉ định xuất khẩu, thì bạn sẽ chỉ cần sử dụng toàn cầu, vì sẽ không có gì được chuyển vào các hàm yêu cầu / xác định của bạn.)

Dưới đây là một ví dụ đơn giản về cách sử dụng shimđể tải Backbone. Nó cũng thêm một bản xuất cho dấu gạch dưới, mặc dù nó không có bất kỳ phụ thuộc nào.

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

});

^{Lưu ý: mã đơn giản hóa này giả định rằng jquery, xương sống và dấu gạch dưới nằm trong các tệp có tên "jquery.js", "backbone.js" và "underscore.js" trong cùng thư mục với mã "chính" này (trở thành cơ sở cho yêu cầu này ). Nếu đây không phải là trường hợp, bạn sẽ cần phải sử dụng một cấu hình đường dẫn .}

Cá nhân tôi nghĩ rằng với shimchức năng tích hợp sẵn, những lợi thế của việc không sử dụng phiên bản rút gọn của Backbone & Underscore vượt trội hơn lợi ích của việc sử dụng ngã ba AMD được đề xuất trong câu trả lời phổ biến khác, nhưng cả hai cách đều hoạt động.

Cập nhật : Kể từ phiên bản 1.3.0 Underscore đã loại bỏ hỗ trợ AMD (RequireJS) .

Bạn có thể sử dụng amdjs / Backbone 0.9.1 và ngã ba amdjs / Underscore 1.3.1 với sự hỗ trợ của AMD từ James Burke (người duy trì RequireJS).

Thông tin thêm về hỗ trợ AMD cho Underscore và Backbone .

// 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();
    });
});

Các mô-đun được đăng ký đúng cách và không cần plugin thứ tự:

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

Underscore thực sự là tùy chọn, vì Backbone hiện có phụ thuộc vào chính nó:

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

Với một số đường AMD, bạn cũng có thể viết nó như thế này:

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

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

Liên quan đến lỗi tối ưu hóa: nhân đôi cấu hình bản dựng của bạn. Tôi giả sử cấu hình đường dẫn của bạn là tắt. Nếu bạn có thiết lập thư mục tương tự như RequireJS Docs, bạn có thể sử dụng:

// 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"
        }
    ]
})

Để tham khảo, kể từ phiên bản 1.1.1 (~ Feb '13), Backbone cũng tự đăng ký dưới dạng mô-đun AMD . Nó sẽ hoạt động với requestjs mà không cần sử dụng cấu hình shim của nó. ( Ngã ba amdjs của James Burke cũng chưa được cập nhật kể từ 1.1.0)

Tin tốt, Underscore 1.6.0 hiện hỗ trợ xác định các yêu cầu !!!

các phiên bản bên dưới này yêu cầu shims hoặc yêu cầu underscore.js sau đó hy vọng mù quáng rằng biến toàn cầu "_" không bị phá hủy (điều công bằng là đặt cược công bằng)

chỉ cần tải nó vào

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

Tôi sẽ viết trực tiếp, bạn có thể đọc phần giải thích trên allowjs.org, bạn có thể sử dụng đoạn mã dưới đây như một đoạn trích để sử dụng hàng ngày; (ps tôi sử dụng yeoman) (vì nhiều thứ được cập nhật, tôi sẽ đăng bài này vào tháng 2 năm 2014.)

Đảm bảo bạn đã bao gồm tập lệnh trong index.html của bạn

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

Sau đó, trong 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;
});

Tôi hy vọng tôi có ích.!

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();
});