Nhập dự án JavaScript hiện tại vào dự án Grunt/Brunch

Question

Tôi đã xem bài nói chuyện của Paul Irish công bố Yeoman (www.yeoman.io), và tôi đang nối vào khái niệm chạy một môi trường xây dựng liên tục. Không phải là nội dung chờ đợi một lời mời Yeoman, tôi đã thử Grunt và Brunch. Cả hai cài đặt một cách dễ dàng, và tôi có thể nhận được các dự án mới và chạy với nỗ lực tối thiểu.

Tôi không hiểu cách thức di chuyển dự án hiện có sang một trong hai nền tảng. Dự án của tôi sử dụng một không gian tên duy nhất và sử dụng hai quy ước cho các mô-đun (một cho instancing khác cho tiện ích), mỗi trong số đó được bao bọc trong các chức năng ẩn danh tự thực hiện xuất khẩu cho cá thể hoặc không gian tên.

Tôi có ít nhất 200 mô-đun và nhiều chức năng trợ giúp đơn giản hơn xuất ra không gian tên; do đó, nó không phải là ở tất cả các hiệu quả để sử dụng giao diện điều khiển để tạo ra những trong một dự án grunt/brunch và sau đó nhập khẩu từng mô-đun riêng lẻ. Hơn nữa, tôi đang sử dụng ít nhất 15 công cụ JavaScript khác nhau của bên thứ ba. Tôi không rõ cách mang những thứ này vào.

Cách hiệu quả nhất để thực hiện dự án lớn, hiện có và di chuyển nó vào Grunt/Brunch với số tiền ít nhất là tái cấu trúc và hỗ trợ cho các công cụ của bên thứ ba tùy ý?

Cập nhật: trong số hai, tôi đã tìm thấy Bữa ăn sáng một chút dễ dàng hơn để đối phó với. Nếu bạn sử dụng kho "skeleton" (có nghĩa là "template" - từ dòng lệnh {trong thư mục bạn muốn thay đổi xảy ra} thực hiện "brunch new [project_name] --sk git git: //github.com/brunch /simple-js-skeleton.git ") cho JS thuần túy, bạn sẽ có được một cấu trúc thư mục mới mà thực sự khá nhạy. Bất kỳ thứ gì bạn đưa vào thư mục 'ứng dụng' (mã của riêng bạn) hoặc 'nhà cung cấp' (bên thứ ba) sẽ được tự động biên dịch lại cho bạn khi chỉnh sửa tệp (khi bạn chạy "xem đồng hồ").

Điều này thật tuyệt, ngoại trừ. Theo tài liệu, bạn kiểm soát các kịch bản lệnh của nhà cung cấp đơn hàng được biên dịch và ghép lại với nhau từ tệp Brunch config.coffee (tệp văn bản JSON). Các thay đổi đối với tệp này dường như không có hiệu lực, do đó bạn kết thúc với điều kiện chủng tộc bên thứ 3 từ các plugin mong đợi các plugin khác.

Hơn nữa, khi bạn thả mã của riêng mình vào thư mục 'ứng dụng' được tạo tự động, bạn sẽ nhận được phiên bản mã do bạn tự động biên soạn, thời gian thực, chỉnh sửa; nhưng không thể truy cập được. Brunch làm xáo trộn đối tượng cửa sổ, vì vậy khai báo không gian tên ban đầu của tôi là window.myNameSpace không thành công và tất cả các cuộc gọi thư viện tiếp theo đến không gian tên cũng bị lỗi. Điều này có liên quan đến hệ thống mô-đun của Brunch, mà tôi không thể tìm thấy tài liệu nào.

Tôi đã giải quyết điều này bằng cách đặt lớp không gian tên của tôi trong thư mục 'nhà cung cấp', đảm bảo rằng nó được gắn vào đối tượng cửa sổ; tuy nhiên, bây giờ có một điều kiện chủng tộc: không gian tên của tôi không phải lúc nào cũng có sẵn cho tất cả các mô-đun của tôi.

Vấn đề bây giờ là thế này:

Một khi bạn đã sao chép tất cả các thư viện nội bộ và bên ngoài của bạn vào một dự án Brunch, làm thế nào để bạn cấu hình các ứng dụng để tải chúng theo một thứ tự lành mạnh?

Answer 1

Đây là một chút về tính năng mở, nhưng cuối cùng tôi đã tìm ra.Khi tôi bắt đầu với bữa ăn nửa buổi, không rõ ràng làm thế nào để thực hiện bước đầu tiên: nhập cấu trúc thư mục của tôi. Nó đã cho tôi một vài đi ngang qua các tài liệu, trước khi nó trở nên rõ ràng:

1. Execute brunch new MyAppName -s https://github.com/damassi/Javascript-App-Skeleton, mà sẽ tạo ra một cấu trúc thư mục xương và tập tin config.coffee
2. Đối với tôi, các thư mục có liên quan chỉ trong cấu trúc này là 'ứng dụng' (nội dung src thô cho CSS, JS và HTML), 'công khai' (đích cho nội dung được biên dịch và vị trí phục vụ máy chủ NodeJS) và 'nhà cung cấp' (nơi dành cho tệp của bên thứ ba).
3. Bữa nửa buổi tạo tệp config.coffee ở gốc của cấu trúc thư mục với nội dung này: files: javascripts: defaultExtension: 'js' joinTo: 'javascripts/app.js': /^app/ 'javascripts/vendor.js': /^vendor/ order: before: [ 'vendor/scripts/console-helper.js', 'vendor/scripts/jquery-1.7.1.min.js' ]
4. Thuộc tính 'joinTo' của đối tượng này làm tôi bối rối, cho đến khi tôi nhận ra rằng 'javascripts' thực sự chỉ là mặt nạ cho ' mã phía máy khách 'và' apps.js 'đó thực sự là một cuộc gọi để' nhận tất cả * .js tệp trong thư mục "ứng dụng", đệ quy '.
5. Khi điều này rõ ràng, tất cả những gì bạn cần làm là thả nội dung của bạn vào 'ứng dụng'. Tôi đã đặt các tệp * .html và hình ảnh của mình vào thư mục con 'asset' và đặt tất cả nội dung JavaScript của tôi vào lib.
6. Tại thời điểm này, bạn có thể chạy đồng hồ và xây dựng bữa sáng muộn và dự án của bạn được thiết lập và chạy, biên dịch theo thời gian thực khi bạn thực hiện thay đổi, tải lại trực tiếp trong trình duyệt.

Trong khi bữa nửa buổi tốt hơn hộp hơn Grunt ở mức dễ sử dụng bước 6, trong đó không thành công đối với tôi là bản chất của việc biên soạn trong bữa nửa buổi. Mỗi tệp JavaScript được gói trong mô-đun CommonJS và tên mô-đun dựa trên đường dẫn tương đối và tên tệp ('lib/core/ajax', v.v.). Triết lý CommonJS không dành cho tôi, và công việc liên quan đến việc tái cấu trúc thư viện của tôi để sử dụng CommonJS là rất lớn.

Vì vậy, hãy quay lại Grunt. Một khi tôi hiểu cách nhập một dự án vào Brunch, nhập vào Grunt là một snap. Tôi đang ở trên cửa sổ, vì vậy tất cả các cuộc gọi grunt sử dụng grunt.cmd.

1. Gọi grunt init:jquery (điều này có thể ở bất cứ đâu, tôi chuyển cấu trúc thư mục được tạo ra vào thư mục dự án hiện tại của tôi)
2. Giống như Brunch, bạn sẽ có được tự động tạo cấu trúc thư mục và tập tin cấu hình (grunt.js), nhưng nó nhiều, mỏng hơn nhiều. Cấu hình của Grunt trông giống như sau: concat: { dist: { src: ['<config:lint.files>'], dest: 'dist/<%= pkg.name %>.js' } }, min: { dist: { src: ['<banner:meta.banner>', '<config:concat.dist.dest>'], dest: 'dist/<%= pkg.name %>.min.js' } }, qunit: { files: ['test/**/*.html'] }, lint: { files: ['grunt.js', 'src/**/*.js', 'test/**/*.js'] }, watch: { files: '<config:lint.files>', tasks: 'lint qunit' }
3. Điều này có vẻ hơi lạ với đầu của tôi, nhưng nó thực sự khá thanh lịch. Thuộc tính 'phút' xác định tệp cuối cùng, được nối, được tô màu và rút gọn mà ứng dụng web của tôi sẽ phân phối. Giá trị nguồn của nó là '', đó là phép thuật Grunt để xem xét giá trị của giá trị thuộc tính dist của đối tượng concat, mà sau đó được bắt nguồn từ giá trị thuộc tính của tệp lint. Vì vậy, bạn xác định các tài nguyên bạn muốn được linted, nối, minified và đầu ra đến một điểm đến ở mức lint.
4. Khi phần này được đặt ra, bạn phải thực hiện thêm một chút công việc để có được các bản dựng, xem và máy chủ tại chỗ. Trong grunt, khi máy chủ được thực hiện xong, nó thoát. Điều đó có nghĩa rằng nếu bạn thực hiện nhiệm vụ máy chủ grunt, nó sẽ khởi động máy chủ và không có nhiệm vụ nào khác để làm, thoát.
5. Lỗi đầu tiên của tôi là gói nhiệm vụ máy chủ với nhiệm vụ của đồng hồ, bằng cách đặt watch.task = 'server lint qunit'. Điều này làm việc cho thay đổi đầu tiên bạn thực hiện cho nguồn, nhưng thay đổi thứ hai sẽ cố gắng bắt đầu một phiên bản thứ hai của máy chủ trên cùng một cổng và không thành công. Thay vào đó, bạn có thể đăng ký một nhiệm vụ grunt.registerTask('dev', 'server watch qunit'); và gọi grunt dev để có được một máy chủ chạy với thời gian thực, xây dựng liên tục.
6. Tiếp theo, nội dung HTML của tôi phụ thuộc vào phía máy chủ bao gồm để lắp ráp trang.Tôi không thể tìm ra cách làm việc này trong Node, và phía máy khách bao gồm việc sử dụng <object/> không hoạt động, khi họ chèn nội dung (trong trường hợp của tôi khác nhau <script/> và <link/> phần tử) vào Iframe. mô hình mô-đun (Không gian tên của tôi nằm trong một đối tượng cửa sổ khác với đối tượng cửa sổ của các khung nội tuyến). May mắn thay, đối tượng concat của grunt là một multitask và nó có thể nối bất cứ thứ gì. Vì vậy, tôi đã thêm các tệp HTML của mình vào concat và ứng dụng một trang của tôi đã sẵn sàng.
7. Tiếp theo, vì máy chủ Node đang chạy trên một cổng khác với cá thể IIS của tôi, bạn có vấn đề ajax miền chéo. Điều này SO article bắt đầu tôi trên con đường bên phải, nhưng cuối cùng tôi cần những thay đổi sau cho tiêu đề nội dung mặc định của IIS: Access-Control-Allow-Credentials: true Access-Control-Allow-Headers: X-Requested-With, X-Prototype-Version, Content-Type, Origin, Allow Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS Access-Control-Allow-Origin: http://localhost:88
8. Cuối cùng, vì tôi đang sử dụng jQuery cho trình xử lý AJAX mặc định của mình, tôi cần thêm nó vào tùy chọn ajax của mình : xhrFields: { withCredentials: true }
9. Rõ ràng, có những tác động bảo mật ở đây; nhưng vì điều này sẽ chỉ ảnh hưởng đến môi trường dev của tôi và sẽ không bị đẩy vào Sản xuất, tôi nghĩ điều đó là ổn.
10. Cuối cùng nhưng không kém phần quan trọng, tôi đã dành một giờ cố gắng gỡ lỗi về việc rút gọn thông qua Uglify, which was conveniently answered by this SO post. Kể từ khi Visual Studio nhấn mạnh vào chèn BOM trên tất cả các tốc độ ("UTF-8 với chữ ký" là euphemism), nhưng UTF-8 Cast sửa lỗi này theo thứ tự nhanh chóng.

Khi tôi đã tìm ra tất cả điều này, Grunt có vẻ đang hoạt động khá tốt. Tôi chưa có cơ hội để bắt đầu thử nghiệm quá trình phát triển thực tế trong môi trường xây dựng liên tục mới này; nhưng đây là những gì nó cần để có thể bắt đầu.

Answer 2

config.coffee không thực sự là json thay vì js/coffeescript thực, nhưng chỉnh sửa đơn đặt hàng sẽ hoạt động. Bạn có thể mở một vấn đề trong trình gỡ rối brunch với thứ tự cấu hình chính xác không?

Tôi không nghĩ rằng có cách viết lại nhanh ứng dụng của bạn để sử dụng các mô-đun thay vì các biến số toàn cầu window. Globals được coi là một hương vị xấu, bằng cách này. Nhưng giải pháp của bạn có thể hoạt động, vâng.