javascript - Làm thế nào để sử dụng một trình quản lý gói cho cả backend và frontend? (Yarn/NPM)

Trước đây tôi thường dùng NPM cho các công việc phía máy chủ và Bower cho giao diện frontend. NPM sẽ cài đặt vào thư mục node_modules/ và tôi có một file .bowerrc để cài đặt các gói đó vào public/lib.

Bây giờ tôi đã bắt đầu sử dụng Yarn thay vì NPM; và vì chúng gần như tương thích 1:1 nên việc chuyển đổi này diễn ra suôn sẻ. Tuy nhiên, bây giờ tôi tự hỏi liệu tôi có thể bỏ Bower và chỉ sử dụng Yarn cho mọi thứ không. Nhưng tôi không thấy cách nào (dù là trong NPM hay Yarn) để cài đặt các gói bình thường vào node_modules, rồi sau đó có một tùy chọn riêng để đặt một số gói trong public/... Điều gì đó tương tự như tùy chọn --dev, nhưng thay vào đó sẽ là yarn add jquery --public. Có cách nào như thế tồn tại không?

Một lựa chọn, dĩ nhiên, là cài đặt tất cả các gói vào thư mục public/ nhưng tôi tin rằng đây là một thực hành tồi (hãy sửa tôi nếu tôi sai).

Một lựa chọn khác có thể là có một package.json riêng trong thư mục public/ và chạy các lệnh Yarn riêng biệt ở đó cho các gói frontend, nhưng tôi nghĩ nó chỉ hơi kém tiện lợi hơn một chút; dễ xảy ra lỗi hơn.

Câu trả lời #1

Chuẩn mực hầu như là một thứ gì đó như:

1. Cài đặt các gói qua yarn

2. Sử dụng một trình chạy nhiệm vụ như gulp, hoặc trình tải module & đóng gói như webpack để tạo các gói mà bạn cần.

   • Tất cả điều này phụ thuộc vào ngăn xếp của bạn, rõ ràng còn có những cách khác, ví dụ trong quá khứ tôi đã sử dụng bundling gốc của .NET, mà bạn có thể đạt được điều tương tự như gulp/webpack... một lần nữa, điều này là để bạn tự quyết định.

Tóm lại là, cài đặt tất cả các mô-đun ở một vị trí trung tâm (sử dụng trình quản lý gói), sau đó có một bộ nạp hoặc quy trình khác lấy và di chuyển các tài nguyên cần thiết đến vị trí mà bạn cần sử dụng chúng.

Tôi gợi ý bạn xem qua một dự án kickstart (liên quan đến bộ công nghệ mà bạn đang sử dụng) ví dụ: Tôi đã từng sử dụng Fountainjs trước đây với thành công, hoặc xem xét Yeoman nếu Fountain không làm bạn hứng thú (thông tin thêm: Fountain được xây dựng dựa trên Yeoman)

Trong các lệnh giả:

1. yarn install     /// installs all assets
2. gulp build       /// cleans out current public folder, bundles & copies new
3. gulp serve       /// runs your app