RequireJS: Multiple main.js?

Question

Tôi đã xây dựng một ứng dụng trang đơn bằng cách sử dụng requireJS và cho đến nay yêu thích nó. Tôi đã đi đến điểm phát triển các phần khác của trang web bên ngoài ứng dụng chính và không thực sự chắc chắn cách (hoặc nếu) sử dụng requireJS cho việc này.

Trong chính ứng dụng tất cả mọi thứ của tôi được kích hoạt bởi thẻ script này:

<script data-main='/scripts/main' src='/scripts/libs/require.js'> 

Tôi bây giờ đang phát triển trang chủ trong đó có nó kịch bản kết thúc trước riêng. Sử dụng trình tối ưu hóa khi nói đến việc đưa trang web vào hoạt động sẽ gộp tất cả các tập lệnh này thành một gói main.js. Tôi đang đấu tranh để hiểu nơi mà phần còn lại của trang web của tôi phù hợp với điều này.

Giả sử ứng dụng của tôi phụ thuộc vào jQuery và ứng dụng được nhóm lại trong phiên bản được tối ưu hóa của ứng dụng, nếu tôi muốn sử dụng jQuery trên trang chủ thì sao? Tôi không muốn tải trong ứng dụng main.js của ứng dụng chỉ để truy cập vào mô-đun jQuery của mình. Vì vậy, yeah ... một chút bối rối!

Tôi tưởng tượng ra một cấu trúc trang web loại như thế này:

/scripts 
    - app-main.js //(includes all module dependencies after optimzation) 
    - home-main.js //(includes all module dependencies after optimzation) 

App:

<script data-main='/scripts/app-main' src='/scripts/libs/require.js'> 

Trang chủ:

<script data-main='/scripts/home-main' src='/scripts/libs/require.js'> 

Câu hỏi

1. Làm thế nào tôi có thể sử dụng RequireJS để phát triển các phần khác nhau của một trang web?
2. Bạn có nên có nhiều tệp main.js không?
3. Các tệp main.js khác nhau của chúng tôi có thể chia sẻ các mô-đun phổ biến như tối ưu hóa bài đăng jQuery như thế nào?

Answer 1

Vì vậy, require.js phải luôn được sử dụng trên bất kỳ trang nào để cho phép mô đun và không gian tên sạch. Tôi tin rằng mỗi 'ứng dụng' cần tập lệnh main.js của riêng nó. Khi tối ưu hóa trang web của bạn r.js cho phép bạn loại trừ các mô-đun từ trình biên dịch mà bạn nên làm cho jQuery luôn.

Bằng cách đó require.js sẽ luôn tải jquery.js khi đang di chuyển và phần lớn thời gian từ bộ nhớ cache. Tìm các mô-đun khác có thể được lưu trong bộ nhớ cache giữa ứng dụng và trang chủ của bạn sẽ phải được thực hiện theo quyết định của riêng bạn và tùy thuộc vào luồng người dùng của bạn và các yếu tố khác.

Có vẻ như bạn có hai dự án, một ứng dụng và một trang web tiếp thị. Tôi tin rằng những người nên được tách ra để khá mở rộng và nên có riêng của họ 'js' thư mục chứa main.js.

Answer 2

Nhóm requirejs có một số mẫu cho ứng dụng nhiều trang trên github. Có một cái nhìn tại địa chỉ: https://github.com/requirejs/example-multipage

Về cơ bản bạn sẽ có cấu trúc sau:

• page1.html: Trang 1 trong tổng số ứng dụng.

• page2.html: trang 2 của ứng dụng.

• ứng dụng js: thư mục lưu trữ các mô-đun dành riêng cho ứng dụng.

• lib: thư mục chứa các mô-đun bên thứ ba, như jQuery.

• common.js: chứa cấu hình requirejs và nó sẽ là mục tiêu xây dựng cho tập hợp các mô-đun chung.

• page1.js: được sử dụng cho dữ liệu chính cho page1.html. Tải mô-đun chung, sau đó tải ứng dụng/main1, mô-đun chính cho trang 1.

• page2.js: được sử dụng cho dữ liệu chính cho page2.html. Tải mô-đun chung, sau đó tải ứng dụng/main2, mô-đun chính cho trang 2.