Plugin văn bản require.js thêm ".js" vào tên tệp

Question

Tôi đang cố gắng làm việc với requirejs và plugin văn bản và tôi gặp sự cố lạ.

tôi có hai máy chủ web:

1. localhost: 3000 - đóng vai trò như CDN và có tất cả các tập tin tĩnh: js, hình ảnh, css và các mẫu
2. localhost: 3001 - máy chủ - hoạt động như máy chủ REST và chỉ phục vụ một tệp, tệp main.html

Tệp main.html tải tất cả các tệp js từ se cond máy chủ bằng cách sử dụng dòng sau:

<script data-main="http://localhost:3000/js/main" 
     src="http://localhost:3000/lib/require-jquery.js"></script> 

Đối với một số lý do, khi sử dụng requirejs văn bản Plugin, ông thêm vào các mẫu ".js" hậu tố khi điều hướng đến localhost: 3001

Tôi đang sử dụng cú pháp sau:

define ['jquery','backbone','underscore','models/model','text!templates/main.html', 
     'views/navigation', 'views/player', 'views/content', 'views/header'] 

khi tôi hướng đến localhost: 3000 nó hoạt động tốt.

Bạn có thể nghĩ ra bất kỳ lý do nào khiến plugin văn bản gặp sự cố khi phân phối tệp văn bản từ máy chủ từ xa (ví dụ: máy chủ CDN) không?

Answer 1

Tôi đã tìm hiểu mã của plugin văn bản.

Tôi đã phát hiện ra rằng plugin văn bản giả định rằng nhà phát triển đã chuyển đổi mẫu văn bản thành html vì nó nằm trên một tên miền khác.

Tôi đã thay đổi mã của plugin văn bản để không giả định nó.

Ai đó nghĩ rằng tôi đang làm điều gì đó sai?

Mã ban đầu của plugin:

  //Load the text. Use XHR if possible and in a browser. 
      if (!hasLocation || useXhr(url, defaultProtocol, defaultHostName, defaultPort)) { 
       text.get(url, function (content) { 
        text.finishLoad(name, parsed.strip, content, onLoad, config); 
       }); 
      } else { 
       //Need to fetch the resource across domains. Assume 
       //the resource has been optimized into a JS module. Fetch 
       //by the module name + extension, but do not include the 
       //!strip part to avoid file system issues. 
       req([nonStripName], function (content) { 
        text.finishLoad(parsed.moduleName + '.' + parsed.ext, 
            parsed.strip, content, onLoad, config); 
       }); 
      } 

Answer 2

Tôi đã có rắc rối với các plugin văn bản khi làm việc trên các lĩnh vực và có lẽ hai máy chủ localhost của bạn đang đánh này quá.

Trong thanh tra web, tôi thấy rằng require.js đang cố gắng tìm nạp những thứ như some-content.html.js thay vì some-content.html.

Bạn có đang chạy mã này trong chế độ phát triển hoặc xây dựng thành bộ sản xuất không? Khi bạn nhóm mọi thứ lên, plugin văn bản không nên gặp rắc rối tên miền chéo này.

Đây là một phần tài liệu API mà nghiêng me off (từ http://requirejs.org/docs/api.html):

Các baseUrl có thể là một URL trên một tên miền khác nhau như các trang đó sẽ require.js tải. Yêu cầu tải tập lệnh RequireJS trên các tên miền. hạn chế duy nhất là nội dung văn bản được tải bằng văn bản! plugin: các đường dẫn này phải nằm trên cùng một tên miền với trang, ít nhất trong quá trình phát triển . Công cụ tối ưu hóa sẽ nội dòng văn bản! plugin tài nguyên vì vậy sau khi sử dụng công cụ tối ưu hóa, bạn có thể sử dụng tài nguyên văn bản tham chiếu đó! tài nguyên plugin từ một tên miền khác.

Here's an article đó đã giúp tôi làm việc xung quanh này cho trình duyệt hỗ trợ CORS:

Answer 3

tôi đã bị hack ở mọi giải pháp tôi đã nhìn thấy được đăng tải trên internet ngoài chạy r.js ưu và biên soạn các mẫu của tôi vào .js.

Một công việc tạm thời xung quanh là đặt các mẫu của bạn trong cùng thư mục với tệp index.html của bạn. Điều này tất nhiên không giải quyết vấn đề nhưng nếu bạn đang ở bế tắc như tôi, thì điều này ít nhất sẽ giúp bạn di chuyển một lần nữa.

Answer 4

Tôi đã gặp sự cố tương tự và sửa lỗi là để đảm bảo tệp main.js được tải từ cùng miền với các tệp * .htm. Khi chúng khác nhau, yêu cầu sẽ nối thêm .js vào các tệp html, dẫn đến 404.

Answer 5

documentation of the text plugin đưa ra gợi ý cho giải pháp: Có thể định cấu hình plugin theo cách luôn tìm nạp tài nguyên từ xa qua XHR mà không thêm hậu tố .js và tải nó qua thẻ tập lệnh. Giải pháp đơn giản là luôn luôn thực thi bằng cách sử dụng XHR:

requirejs.config({ 
    config: { 
     text: { 
     useXhr: function (url, protocol, hostname, port) { 
      return true; 
     } 
     } 
    } 
}); 

Lưu ý rằng máy chủ từ xa cần đặt đúng tiêu đề CORS và đây có thể là vấn đề bảo mật. Do đó, hãy thêm các kiểm tra cần thiết cho url đáng tin cậy khi sử dụng url này thay vì chỉ cần trả về true.

Answer 6

Cấu hình như vậy không hoạt động trong văn bản hiện tại! cắm vào. Giải pháp của tôi là ở trọng phương pháp useXhr trong 'text' module

require(["text"], function (text) 
{ if(location.port == '4502' || location.port == '4503')// AEM env-t 
     text.useXhr = function(){ return true; } 
    require(["loader/widget/WidgetLoader"]); // dependent on HTML templates by text! plugin 
});