Npm chạy xây dựng NodeJS
Thông thường có hai loại công cụ xây dựng JavaScript. trình chạy tác vụ và trình đóng gói mô-đun. Trong bài viết này, chúng ta sẽ xem xét cách sử dụng các tập lệnh xây dựng npm cụ thể của dự án làm công cụ xây dựng và trình chạy tác vụ, thay vì dựa vào các trình chạy tác vụ như Gulp và Grunt hoặc các gói mô-đun như Webpack Show
Grunt và Gulp là các trình chạy tác vụ, chúng tự động hóa các tác vụ thủ công định kỳ trong quá trình phát triển. Mặt khác, Webpack là một gói mô-đun lấy các đoạn mã ứng dụng riêng biệt, mỗi đoạn có các phụ thuộc riêng và gộp chúng vào các nội dung tĩnh Trong bài viết về Grunt và Gulp của chúng tôi, chúng tôi đã đề cập đến một giải pháp thay thế công cụ xây dựng khác mà chúng tôi chưa thực sự đi sâu vào. tập lệnh npm. Một số bạn đã hỏi rằng bạn muốn biết thêm về cách bạn có thể sử dụng tập lệnh npm làm công cụ xây dựng/trình chạy tác vụ, vì vậy đó chính xác là những gì chúng ta sẽ xem xét Tại sao lại là Npm Script?Nếu bạn sử dụng các công cụ xây dựng như Grunt, Gulp và Webpack đủ lâu, bạn sẽ bắt đầu thấy rằng mình bắt đầu chiến đấu với công cụ này hơn là tập trung vào việc viết mã cho ứng dụng của mình. Mỗi công cụ có cách thức hoạt động riêng và điều đó có nghĩa là mỗi công cụ đều có những đặc điểm và vấn đề riêng cần được học Cả Grunt và Gulp đều phụ thuộc rất nhiều vào việc sử dụng plugin để thêm chức năng và hầu hết các plugin đó đều là trình bao bọc xung quanh các gói npm hiện có. Điều này có thể dẫn đến các vấn đề như
Vì hầu hết các gói thường có CLI, một giải pháp đơn giản cho những vấn đề này là loại bỏ hoàn toàn sự trừu tượng hóa (đôi khi phức tạp) của các công cụ xây dựng và chạy các gói cơ bản theo cách thủ công trên dòng lệnh. Đây là một giải pháp tuyệt vời, nhưng làm thế nào để bạn nhớ tất cả các lệnh CLI đó và các tùy chọn của chúng? Tập lệnh NpmNhập các tập lệnh npm, đã có từ ít nhất là phiên bản 6 của npm. Sử dụng thuộc tính 3 trong tệp 4 của bạn, có thể xác định các tập lệnh tùy chỉnh để chạy các lệnh CLI khác nhau. Điều này rất giống với công cụ GNU Make, được các nhà phát triển ứng dụng máy tính để bàn sử dụng cho các hệ thống giống Unix để xây dựng và quản lý ứng dụng của họSau khi bạn xác định 3 trong 4 của mình, npm có một lệnh chạy có thể thực thi các tập lệnh này. Nếu bạn đã từng sử dụng một gói yêu cầu bạn chạy lệnh như 7 hoặc 8, thì bạn đã sử dụng tập lệnh npmMột tập lệnh có thể đơn giản như một lệnh đầu cuối hoặc một chuỗi lệnh phức tạp hơn cần được chạy theo một thứ tự cụ thể Để sử dụng tập lệnh npm làm công cụ xây dựng, chúng tôi sẽ xác định một loạt tập lệnh trong tệp 4, tương tự như xác định tác vụ chúng tôi muốn chạy trong tệp cấu hình trong các công cụ xây dựng khác. Sự khác biệt với các tập lệnh npm là chúng tôi sẽ chạy gói CLI mà không cần bất kỳ plugin nào, sau đó xâu chuỗi các tập lệnh lại với nhau để chúng tôi có thể kích hoạt bản dựng bằng một lệnh duy nhất. Đối với mục đích trình diễn, chúng tôi sẽ tạo lại cùng một quy trình xây dựng mà chúng tôi đã sử dụng trong
Dự án mẫuChúng tôi đã tạo một kho lưu trữ GitHub dưới dạng bản demo cho những gì chúng tôi đang thử nghiệm tại đây. Nó có một 4 được cấu hình sẵn, bao gồm tất cả các gói npm mà chúng tôi đang sử dụng
Gói 1 là gói thay thế cho gói 2 mà chúng ta đã sử dụng trong bài viết Grunt vs Gulp, do gói 3 không còn được duy trìKho lưu trữ cũng chứa tất cả các tệp cần thiết và nội dung demo, vì vậy bạn có thể sử dụng nó để thử nghiệm các tập lệnh npm mà chúng tôi sẽ thiết lập Tạo tập lệnh đầu tiên của bạnĐối với 4 đầu tiên của chúng tôi, hãy bắt đầu bằng cách biên dịch tệp Sass của chúng tôi thành CSS bằng cách sử dụng gói sass. Đầu tiên chúng ta cần cài đặt nó 2Thao tác này sẽ cài đặt gói trong thư mục 5 của bạn. Lưu ý rằng cờ 6 lưu gói này trong phần 7 của tệp 4. Điều này giúp các nhà phát triển khác dễ dàng cài đặt các gói cần thiết trong tương lai chỉ bằng cách chạy 9Theo hướng dẫn sử dụng công cụ dòng lệnh sass, chúng ta có thể biên dịch tệp 80 của mình thành 81 bằng lệnh sau
Vì vậy, hãy thêm lệnh này dưới dạng tập lệnh 82 có tên là 83 vào tệp 4 của chúng tôi trong phần 3________số 8Bây giờ hãy chạy 86 từ dòng lệnh. Bạn sẽ thấy tệp Sass của mình được biên dịch thành công thành CSS và đầu ra của lệnh sẽ giống như đang chạy thủ công 87 8Quá trình này sau đó có thể được lặp lại cho phần còn lại của các yêu cầu dự án của chúng tôi Lệnh kiểm traNếu bạn thấy rằng tập lệnh không hoạt động như mong đợi, bạn có thể kiểm tra lệnh được liên kết theo cách thủ công từ thiết bị đầu cuối của mình bằng cách sử dụng lệnh 88. Lệnh này cho phép bạn chạy bất kỳ lệnh tùy ý nào khác từ gói được cài đặt cục bộĐể kiểm tra lệnh cho tập lệnh 83 với 88, bạn có thể chạy nó như thế này 2Thêm nhiều tập lệnh hơnChúng tôi có thể làm theo quy trình tương tự cho bất kỳ tập lệnh bổ sung nào mà chúng tôi muốn thêm
Chuỗi kịch bảnCũng có thể xâu chuỗi các tập lệnh lại với nhau. Điều này là do bản thân 24 là một lệnh CLI và nó có thể được chạy từ các tập lệnh khác. Ví dụ 7Ở đây, chúng tôi đã tạo hai tập lệnh riêng biệt, 25 và 26, nối các tệp CSS và JS của chúng tôi bằng lệnh 27. Chúng ta có thể chạy chúng một cách riêng biệt, nhưng thông thường sẽ rất hữu ích nếu có thể chạy chúng dưới dạng một lệnh duy nhất. Chúng tôi có thể làm như vậy bằng cách tạo tập lệnh 27 mới chạy cả hai tập lệnh bằng cách sử dụng 24Tập lệnh nhómKhi chúng tôi đã cài đặt tất cả các gói cần thiết, phần 7 của 4 của chúng tôi sẽ trông giống như thế này 5Tôi sẽ không đi vào chi tiết tất cả các tập lệnh mà chúng ta đã định cấu hình trong dự án ví dụ, nhưng bây giờ bạn đã biết cách thức hoạt động của các tập lệnh npm, có lẽ bạn có thể hiểu được chức năng của từng tập lệnh sau đây. 7Phần quan trọng mà tôi muốn nhấn mạnh là ở dưới cùng, nơi chúng tôi đã tạo các tập lệnh 73 cho các nhóm tập lệnh riêng lẻ ( 74, 75, 76) và sau đó xâu chuỗi chúng lại với nhau trong một tập lệnh duy nhất có tên là 73. Việc chia nhỏ mọi thứ thành các nhóm hợp lý không chỉ giúp dễ dàng xâu chuỗi các tập lệnh lại với nhau mà còn hữu ích khi bạn chỉ muốn biên dịch một nhóm nội dung nhất định của mình. Ví dụ, theo dõi những thay đổiTheo dõi những thay đổiKhả năng biên dịch tất cả nội dung giao diện người dùng của bạn bằng một lệnh 78 duy nhất rất hữu ích, nhưng nó sẽ nhanh chóng gây khó chịu nếu bạn cần chạy nó sau mỗi lần bạn thay đổi một phần mã của mình. Trong những tình huống này, tốt hơn là để tập lệnh “theo dõi” các thay đổi đối với mã của bạn và sau đó tự động chạy tập lệnh xây dựngChúng ta có thể đạt được điều này bằng cách sử dụng lệnh gói 79. Lệnh 79 hoạt động bằng cách xem các tệp bạn chỉ định bằng cách sử dụng mẫu hình cầu, sau đó chạy lệnh bạn chỉ định (sau 51). Ví dụ: để xây dựng tệp CSS của chúng tôi khi tệp Sass của chúng tôi thay đổi 7Vì vậy, chúng tôi có thể tạo một số tập lệnh 52 mới và thêm chúng vào 4 0Bây giờ nếu chúng tôi chạy 54, nó sẽ theo dõi các thay đổi đối với các tệp Sass của chúng tôi và chạy 55 nếu phát hiện bất kỳ thay đổi nào (và tương tự đối với JS)Chạy tập lệnh song songGiả sử bạn muốn chạy cả hai tập lệnh 52 cùng lúc khi bạn đang làm việc trên các tệp CSS và JS của mình. Việc chạy 57 sẽ không hoạt động vì các lệnh này được chạy theo trình tự (tôi. e. , 58 sẽ không chạy cho đến khi 59 kết thúc). Làm cách nào để chúng tôi chạy song song các tập lệnh này? 70 có cờ 72 cho phép chúng tôi chạy các nhóm tác vụ cùng một lúc. Vì vậy, hãy tạo một tập lệnh 52 mới 0Lệnh này sẽ chạy song song bất kỳ tập lệnh 74 nào mà chúng tôi đã xác định, vì vậy chúng tôi có thể làm việc trên cả tệp CSS và tệp JS của mình và yêu cầu chúng được xây dựng lại cùng một lúc. Thành công. Các tập lệnh npm cuối cùng của chúng tôi bây giờ là 1Sử dụng tập lệnh của bạn để triển khaiƯu điểm khác của việc sử dụng tập lệnh npm theo cách này là có thể sử dụng lại tập lệnh 73 để triển khai nội dung của bạn tới máy chủVí dụ: giả sử bạn sử dụng tập lệnh npm để tạo nội dung giao diện người dùng cho trang web hoặc ứng dụng mà bạn quản lý thông qua GitHub và lưu trữ bằng SpinupWP. Sử dụng hỗ trợ Git của SpinupWP, bạn sẽ định cấu hình trang web để tự động lấy mã từ kho lưu trữ GitHub. Tuy nhiên, nội dung sẽ không được tạo cho đến khi bạn SSH vào máy chủ và chạy thủ công 9 và 78May mắn thay, bạn có thể thêm các lệnh này vào Tập lệnh triển khai khi định cấu hình kho lưu trữ Git trong SpinupWP Trong ví dụ trên, tôi đã tạo một trang mẫu nhỏ được triển khai từ kho lưu trữ Git. Kho lưu trữ có cùng tệp nội dung và tập lệnh npm như dự án mẫu của chúng tôi. Phần bổ sung duy nhất là một tệp 78, hiển thị một số dữ liệu demo bằng cách sử dụng CSS, JavaScript và hình ảnh được tạo bởi các tập lệnh npm của chúng tôiTại ô Deploy Script trong SpinupWP mình thêm 2 lệnh sau 2Bây giờ, mỗi khi tôi đẩy mã mới, SpinupWP sẽ chạy các lệnh tập lệnh triển khai sau khi tìm nạp các thay đổi Git, cài đặt bất kỳ gói npm mới nào mà tôi có thể đã thêm và xây dựng lại tất cả nội dung giao diện người dùng của tôi. 🙂 bản ánBây giờ bạn sẽ có một ý tưởng tốt về việc tạo một công cụ xây dựng chỉ sử dụng các tập lệnh npm và các gói CLI trông như thế nào. Vậy bạn có nên sử dụng tập lệnh npm thay vì công cụ xây dựng như Grunt hoặc Gulp không? Tôi có xu hướng nghĩ rằng các tập lệnh npm có vẻ như là một giải pháp gọn gàng hơn là phải cài đặt và tìm hiểu các khái niệm trừu tượng của các công cụ xây dựng như Grunt và Gulp, đặc biệt là đối với các dự án nhỏ hơn. Tuy nhiên, tôi có thể tưởng tượng tệp 4 của bạn trở nên khá lộn xộn và phức tạp đối với các dự án lớn hơn với vô số tập lệnh. Tại thời điểm đó, có một tệp cấu hình riêng, dành riêng cho bản dựng của bạn có thể có ý nghĩa hơnNgoài ra, hiệu suất dường như kém hơn nhiều so với cả Grunt và Gulp. Các tập lệnh Npm không có lợi thế là có thể sử dụng các luồng nút theo cách của Gulp, nhưng ngay cả Grunt cũng chạy nhanh hơn đáng kể so với các tập lệnh npm. Do thay thế 2 bằng 1, thật khó để so sánh điểm chuẩn trực tiếp với , nhưng ngay cả khi chúng tôi bỏ qua phần xử lý hình ảnh, các tập lệnh npm vẫn chậm
Điều này mang đến một điểm khác. tính khả dụng của plugin. Để thực hiện đúng điểm chuẩn, tôi đã cố gắng tìm các plugin Grunt và Gulp cho 1. Trong khi có một cái cho Gulp, một cái không tồn tại cho Grunt. Wikimedia gần đây đã phát hiện ra điều này và chuyển sang sử dụng tập lệnh npmĐiều đó đang được nói, một điều cần nhớ là việc sử dụng tập lệnh npm hoặc Grunt/Gulp không loại trừ lẫn nhau. Bạn luôn có thể chạy Grunt/Gulp bên trong tập lệnh npm như một phần của quy trình xây dựng của mình. Điều này có thể giúp giải quyết các vấn đề về hiệu suất nhưng cũng sẽ hữu ích nếu bạn đang cố gắng di chuyển nhóm của mình từ tập lệnh Grunt/Gulp sang npm và muốn thực hiện một cách tiếp cận so le hơn trước khi thay thế hoàn toàn Grunt/Gulp. Nhóm phát triển của chúng tôi đang sử dụng các tập lệnh npm để gọi các tác vụ Gulp cho bản phát hành chính tiếp theo được lên kế hoạch của WP Offload Media. Điều này là do các tác vụ Gulp tương đối phức tạp và sẽ khó triển khai chức năng tương tự bằng cách sử dụng các tập lệnh npm thông thường Bạn có nghĩ rằng sử dụng tập lệnh npm là một giải pháp thay thế tốt hơn cho các công cụ xây dựng khác như Grunt hoặc Gulp không? Mục nhập này đã được đăng trong WP Offload Media, Workflow và được gắn thẻ Grunt, Gulp, Build Tools, Npm Giới thiệu về tác giảJonathan BossengerJonathan là một người đam mê mã nguồn mở, nhà phát triển và nhà văn đến từ Cape Town, Nam Phi. Anh ấy thích tìm hiểu về các công nghệ web mới và chia sẻ kiến thức đó với người khác. Dễ bị uống quá nhiều cà phê @jon_bossenger jonathanbossenger. com
|