Tôi hiện đang trong quá trình lặn vào Laravel Mix và cho đến nay, trong khi tôi hoàn toàn hiểu Laravel Mix là gì và nó hoạt động như thế nào, tôi đang cố hiểu thêm một chút về các thực hành phổ biến và 'How-Tos' ...Kết hợp nhiều tập tin với Laravel Mix
Ví dụ, hãy xem xét cấu trúc tập tin này:
/resources/assets/js/app.js (all global functions)
/resources/assets/js/index/index.js (functions specific to index.js)
/resources/assets/js/about/about.js (functions specific to about.js)
/resources/assets/js/contact/contact.js (functions specific to contact.js)
Bây giờ, lý tưởng, tôi muốn sau đây kết hợp và minified theo cách sau:
/public/js/index/index-some_hash.js (including app.js)
/public/js/about/about-some_hash.js (including app.js)
/public/js/contact/contact-some_hash.js (including app.js)
Theo như tôi hiểu, con đường để đạt được điều này là một cái gì đó như sau:
// Index
mix.js([
'resources/assets/js/app.js',
'resources/assets/js/index/index.js'
], 'public/js/index/index.js').version();
// About
mix.js([
'resources/assets/js/app.js',
'resources/assets/js/about/about.js'
], 'public/js/about/about.js').version();
// Contact
mix.js([
'resources/assets/js/app.js',
'resources/assets/js/contact/contact.js'
], 'public/js/contact/contact.js').version();
Câu hỏi của tôi
Rất đơn giản, tôi muốn biết nếu ở trên là phương pháp đúng để làm gì Tôi đang cố gắng làm gì? Có cách nào tốt hơn, hay cách phổ biến hơn để đạt được điều này?
Nếu cấu trúc trên sai và có các cách khác nên kết hợp các tệp của tôi, sau đó hãy chia sẻ kiến thức của bạn. Tuy nhiên, trừ khi có lý do chính đáng, tôi muốn tránh những điều sau:
- Cung cấp hai tệp riêng biệt cho mỗi trang tức là app.min.js và index.min.js. Điều này yêu cầu hai lần tra cứu trên mỗi trang, lý tưởng là ít nhất có thể
- Cung cấp cùng một tệp cho TẤT CẢ các trang trên trang web của tôi. Phục vụ mã để một trang đó sẽ không sử dụng nó là một sự lãng phí tài nguyên, bất kể bộ nhớ đệm ...
Một Idea ...
tôi nhận thấy một dòng mã trong một trong những các tệp JS; require('./bootstrap');. Gọi cho tôi kiểu cũ nhưng tôi chưa bao giờ thấy điều này trong JavaScript (tôi giả sử nó là từ node.js). Điều đó nói rằng, rõ ràng nó chỉ là tải các tập tin bootstrap.js như là một phụ thuộc vào tập tin cụ thể. Vì vậy, với điều này trong tâm trí, sẽ là giải pháp sau được tốt hơn:
about.js
require('./app'); // Include global functions
// Do some magic here specifically for the 'about' page...
webpack.mix.js:
mix.js(['resources/assets/js/*/*.js'); // For all pages
Nếu đây là một giải pháp tốt hơn sau đó làm thế nào để tôi bao gồm các tập tin bằng cách sử dụng SASS là tốt? Có cách nào ở trên có thể được cải thiện ở tất cả?
tôi nghĩ rằng sass có câu lệnh 'import' hoạt động như' require' trong javascript –
@CerlinBoss Perfect, điều đó có nghĩa là giải pháp 'có thể' của tôi tốt hơn giải pháp đầu tiên? –
Sự khác biệt duy nhất tôi có thể thấy là một tệp 'mix' mỏng. –