Require.js lỗi ngẫu nhiên Không thể tải tài nguyên

Question

My require.js sử dụng ứng dụng, tôi có một lỗi ngẫu nhiên (xảy ra 1 lần cho 50 tải lại) Require.js viết trong giao diện điều khiển:

Không tải được tài nguyên: máy chủ phản hồi với trạng thái 404 (Không tìm thấy)

Thật vậy, require.js cố gắng đưa jquery từ một thư mục sai ... Tôi không biết tại sao, hầu hết thời gian ứng dụng hoạt động tốt ...

cấu hình của tôi là khá đơn giản:

require.config({ 
    shim: { 
    underscore: { 
     exports: '_' 
    }, 
    backbone: { 
     deps: ['underscore', 'jquery'], 
     exports: 'Backbone' 
    }, 
    animate_from_to: { 
     deps: ['jquery'] 
    }, 
    bootstrap: { 
     deps: ['jquery'] 
    }, 
    zoom: { 
     deps: ['jquery'] 
    }, 
    shop_util: { 
     deps: ['jquery'] 
    }, 
    pricer: { 
     deps: ['jquery'] 
    }, 
    filter: { 
     deps: ['jquery'] 
    }, 
    paginator: { 
     deps: ['jquery'] 
    }, 
    }, 
    paths: { 
    bootstrap:  'lib/bootstrap', 
    jquery:   'lib/jquery-1.9.1', 
    zoom:    'lib/jquery.zoom.min', 
    animate_from_to: 'lib/jquery.animate_from_to-1.0.min', 
    backbone:   'lib/backbone.min', 
    underscore:  'lib/underscore.min', 
    text:    'lib/require-text', 
    shop_util: 'lib/shop_util', 
    pricer:   'lib/pricer', 
    filter:   'lib/filter', 
    paginator:  'lib/paginator', 
    } 

}); 

Cảm ơn bạn

Answer 1

Dường như bạn có một điểm nhập cảnh vào ứng dụng của bạn một nơi nào khác hơn là kịch bản dữ liệu chính của bạn (js/main.js). Ngay cả khi đó là tập lệnh tiếp theo trong cùng một trang, bạn không thể phụ thuộc vào tập lệnh dữ liệu chính của bạn đang được hoàn thành trước khi tập lệnh tiếp theo chạy, since it's loaded with async attribute.

<script data-main="js/main" src="js/lib/require.js"></script> 
<!-- foo.js might run before js/main.js !!! --> 
<script src="js/foo.js"></script> 

Bạn có thể chứng minh điều này bằng cách thêm câu lệnh console.log vào cuối js/main.js và một trong foo.js (hoặc bất kỳ thứ gì). Thông thường bạn sẽ thấy một từ js/main.js và sau đó foo.js, nhưng trong đó 1 trong số 50 trường hợp bạn sẽ thấy chúng xảy ra theo thứ tự khác.

Có một số chiến lược để đối phó với điều này:

1 - Có phải tất cả bắt đầu ứng dụng của bạn và sau đó yêu cầu từ kịch bản dữ liệu chính của bạn

Áp dụng cho các ứng dụng đơn trang, tất nhiên. Tất cả trong một tập tin:

require.config({ 
    // snip 
}); 
require(['mymodule'], function(mymodule) { 
    // do stuff 
}); 

2 - Sử dụng một kịch bản nội tuyến ngay sau thẻ require.js kịch bản

Thay vì có kịch bản trên bên trong một file riêng biệt được tham chiếu bởi dữ liệu chính, chỉ cần có thẻ tập lệnh thứ 2 ngay bên dưới. Đây là ví dụ đầu tiên listed in the docs.

Áp dụng chủ yếu để trang duy nhất-apps

3 - Tải của bạn yêu cầu config vào biến toàn cục trước khi thẻ require.js kịch bản

Thứ hai ví dụ listed in the docs.

<script> 
    var require = { 
     paths: { // define them} 
     shim: { // define them } 
    }; 
</script> 
<script src="scripts/require.js"></script> 

Áp dụng chủ yếu để trang duy nhất-apps

4 - Nest yêu cầu cuộc gọi để nạp cấu hình đầu tiên

này hoạt động tốt nhất cho các ứng dụng đa trang và là một trong những khuyến cáo trong the multi-page shim app example

<script src="js/lib/require.js"></script> 
<script> 
    //Load common code that includes config, then load the app 
    //logic for this page. Do the require calls here instead of 
    //a separate file so after a build there are only 2 HTTP 
    //requests instead of three. 
    require(['./js/common'], function (common) { 
     //js/common sets the baseUrl to be js/ so 
     //can just ask for 'app/main1' here instead 
     //of 'js/app/main1' 
     require(['app/main1']); 
    }); 
</script> 

câu hỏi liên quan here, here, và here