Tôi đang thử Grunt và cần một cách đơn giản để nối các mô-đun của tôi

Question

Đây là lần đầu tiên tôi sử dụng Grunt và tôi muốn kết hợp tất cả các mô-đun js của mình, mỗi mô-đun được bao bọc trong một hàm thực hiện ngay lập tức, có chứa một tuyên bố 'sử dụng nghiêm ngặt' và đặt chúng vào một tệp, chỉ được bao bọc trong một hàm thực hiện ngay lập tức, chỉ với một khai báo 'sử dụng nghiêm ngặt'.

Cách này thường được thực hiện?

Tôi nhận thấy đây có phải là trường hợp sử dụng phổ biến không? Có lẽ tôi đang đi về những điều sai đường? Tôi có nên sử dụng một trong các định dạng tải mô-đun (ví dụ: commonjs, amd) Tất cả các tệp này sẽ luôn được tải cùng nhau trong trình duyệt, vì vậy tôi thực sự sẽ không xóa tất cả các chức năng thực thi ngay lập tức nếu đó là cách mọi người thường truy cập. Phần quan trọng là kết quả cuối cùng được bao bọc bằng cách nào đó, vượt qua các bài kiểm tra lint và đơn vị và chứa khai báo 'sử dụng nghiêm ngặt'.

(Tôi nên làm rõ, tôi có nó hoạt động, linting, đơn vị thử nghiệm, nối, và minifying, nó chỉ cảm thấy như tôi đang làm điều gì đó sai khi tôi nhìn thấy một loạt các chức năng thực hiện ngay lập tức không cần thiết trong cuối cùng concatenated file.)

Answer 1

Tôi thường làm điều đó như số jQuery team does it. Bạn tạo một intro.js và outro.js và đưa mọi thứ khác ở giữa:

intro.js

;(function(window, undefined){ 
    'use strict'; 

outro.js

}(window)); 

grunt.js:

concat: { 
    dist: { 
    src: [ 
     'js/src/intro.js', 
     ... 
     'js/src/outro.js' 
    ], 
    dest: 'js/out/app.js' 
    } 
} 

Answer 2

Chỉ muốn thêm vào câu trả lời @elclanrs nếu bạn muốn có thể giữ mô-đun của mình trong các tệp riêng biệt để gỡ lỗi dễ dàng hơn trong quá trình phát triển, bạn rõ ràng sẽ phải gói chúng với intro.js và outro.js. Sử dụng được xây dựng trong concat công việc bạn sẽ phải viết một cái gì đó như:

concat: { 
    events_debug: { // wrap the 'events' module in IIFE 
    src: [ 
     'js/src/intro.js', 
     'js/src/events.js', 
     'js/src/outro.js' 
    ], 
    dest: 'js/out/events.js' 
    }, 
    callbacks_debug: { // wrap the 'callbacks' module in IIFE 
    src: [ 
     'js/src/intro.js', 
     'js/src/callbacks.js', 
     'js/src/outro.js' 
    ], 
    dest: 'js/out/callbacks.js' 
    } 

    // zzZZZ... 
} 

Đó là rất tẻ nhạt và tự lặp lại. Có lẽ bạn có thể muốn tạo một tác vụ tùy chỉnh cho các tệp gói hàng loạt, ví dụ:

wrap: { 
    html: { 
     intro: 'partials/intro.js', 
     outro: 'partials/outro.js', 
     src: 'js/*.js', 
     dest: 'out' // output directory 
    } 
} 

Có một câu hỏi về vấn đề này thời gian gần đây, thấy chủ đề này:

Using grunt concat, how would I automate the concatenation of the same file to many other files?

Answer 3

Tính đến pull request 10, grunt-contrib-concat bây giờ có một tùy chọn footer. Thay vì phần giới thiệu và tệp ngoại hạng, tôi sẽ sử dụng biểu ngữ và một chân trang .

Gruntfile.js

concat: { 
    dist: { 
    src: ['src/my-lib.js'], 
    dest: 'dist/<%= pkg.name %>.js', 
    options: { 
     banner: ";(function(window, undefined){ \n 'use strict';", 
     footer: "}(window));" 
    } 
    } 
} 

Theo tôi, đây là dễ bảo trì hơn và cho phép templating sử dụng các tài sản khác quy định tại Gruntfile của bạn.

Answer 4

Tôi khuyên bạn nên sử dụng plugin grunt của tôi grunt-concat-deps vì nó tự động giải quyết các mô-đun của bạn độc lập với kiến ​​trúc của bạn.

PLUS: Bạn không cần bất kỳ cấu hình mô-đun rõ ràng nào cho plugin vì nó dựa trên định nghĩa mô-đun khai báo và phân cấp theo kiểu YUIDoc.

Xem ở đây để biết thêm thông tin: https://github.com/leoselig/grunt-concat-deps