Sự khác biệt giữa Grunt, NPM và Bower (package.json vs bower.json)

617
apprenticeDev 2014-01-18 15:36.

Tôi mới sử dụng npm và bower, đang xây dựng ứng dụng đầu tiên của mình trong emberjs :).
Tôi có một chút kinh nghiệm với rails, vì vậy tôi quen thuộc với ý tưởng về các tệp để liệt kê các phụ thuộc (chẳng hạn như Bundler Gemfile)

Câu hỏi: khi tôi muốn thêm một gói (và kiểm tra phần phụ thuộc vào git), thì nó thuộc - thành package.jsonhoặc vào ở bower.jsonđâu?

Từ những gì tôi thu thập,
chạy bower installsẽ tìm nạp gói và đưa nó vào /vendorthư mục,
chạy npm installnó sẽ tìm nạp và đưa vào /node_modulesthư mục.

Câu trả lời SO này cho biết bower dành cho giao diện người dùng và npm dành cho nội dung phụ trợ.
Ember-app-kit dường như tuân thủ sự khác biệt này ngay từ cái nhìn đầu tiên ... Nhưng các hướng dẫn trong gruntfile để kích hoạt một số chức năng đưa ra hai lệnh rõ ràng, vì vậy tôi hoàn toàn bối rối ở đây.

Theo trực giác, tôi sẽ đoán rằng

  1. npm install --save-dev package-name sẽ tương đương với việc thêm package-name vào package.json của tôi

  2. bower install --save package-name có thể giống với việc thêm gói vào bower.json của tôi và chạy bower install ?

Nếu đúng như vậy, khi nào tôi nên cài đặt các gói một cách rõ ràng như vậy mà không thêm chúng vào tệp quản lý các phần phụ thuộc (ngoài việc cài đặt các công cụ dòng lệnh trên toàn cầu)?

2 answers

156
Pawel 2016-08-31 08:37.

Cập nhật cho giữa năm 2016 :

Mọi thứ đang thay đổi quá nhanh nên nếu vào cuối năm 2017, câu trả lời này có thể không được cập nhật nữa!

Người mới bắt đầu có thể nhanh chóng bị lạc trong việc lựa chọn các công cụ xây dựng và quy trình làm việc, nhưng những gì cập nhật nhất trong năm 2016 là hoàn toàn không sử dụng Bower, Grunt hoặc Gulp! Với sự trợ giúp của Webpack, bạn có thể làm mọi thứ trực tiếp trong NPM!

Đừng hiểu sai ý tôi khi mọi người sử dụng các quy trình công việc khác và tôi vẫn sử dụng GULP trong dự án kế thừa của mình (nhưng dần dần chuyển khỏi nó), nhưng đây là cách nó được thực hiện ở các công ty và nhà phát triển tốt nhất làm việc trong quy trình công việc này kiếm được RẤT NHIỀU tiền!

Nhìn vào mẫu này, đây là một thiết lập rất cập nhật bao gồm hỗn hợp các công nghệ tốt nhất và mới nhất: https://github.com/coryhouse/react-slingshot

  • Webpack
  • NPM như một công cụ xây dựng (không có Gulp, Grunt hoặc Bower)
  • Phản ứng với Redux
  • ESLint
  • danh sách dài. Đi và khám phá!

Những câu hỏi của bạn:

Khi tôi muốn thêm một gói (và kiểm tra phần phụ thuộc vào git), thì nó thuộc về đâu - vào package.json hoặc vào bower.json

  • Mọi thứ thuộc về package.json bây giờ

  • Các phụ thuộc bắt buộc để xây dựng nằm trong "devDependencies" tức là npm install require-dir --save-dev(--save-dev cập nhật package.json của bạn bằng cách thêm một mục nhập vào devDependencies)

  • Các phần phụ thuộc cần thiết cho ứng dụng của bạn trong thời gian chạy nằm trong "phần phụ thuộc" tức là npm install lodash --save(- lưu các bản cập nhật package.json của bạn bằng cách thêm một mục vào các phần phụ thuộc)

Nếu đúng như vậy, khi nào tôi nên cài đặt các gói một cách rõ ràng như vậy mà không thêm chúng vào tệp quản lý các phần phụ thuộc (ngoài việc cài đặt các công cụ dòng lệnh trên toàn cầu)?

Luôn luôn . Chỉ vì sự thoải mái. Khi bạn thêm cờ ( --save-devhoặc --save), tệp quản lý deps (package.json) sẽ được cập nhật tự động. Đừng lãng phí thời gian bằng cách chỉnh sửa các phụ thuộc trong đó theo cách thủ công. Phím tắt cho npm install --save-dev package-namenpm i -D package-namevà phím tắt cho npm install --save package-namenpm i -S package-name

579
sachinjain024 2014-01-18 15:45.

Npm và Bower đều là công cụ quản lý phụ thuộc. Nhưng sự khác biệt chính giữa hai là NPM được sử dụng để cài đặt module Node js nhưng Chòi chơi cho js được sử dụng để quản lý các thành phần kết thúc trước như html, css, js vv .

Một thực tế khiến điều này khó hiểu hơn là npm cung cấp một số gói có thể được sử dụng trong phát triển front-end, như gruntjshint.

Những dòng này thêm nhiều ý nghĩa

Bower, không giống như npm, có thể có nhiều tệp (ví dụ: .js, .css, .html, .png, .ttf) được coi là (các) tệp chính. Bower về mặt ngữ nghĩa coi các tệp chính này, khi được đóng gói cùng nhau, là một thành phần.

Chỉnh sửa : Grunt khá khác với Npm và Bower. Grunt là một công cụ chạy tác vụ javascript. Bạn có thể làm nhiều việc bằng cách sử dụng grunt mà nếu không bạn phải làm thủ công. Làm nổi bật một số công dụng của Grunt:

  1. Đang nén một số tệp (ví dụ: plugin zipup)
  2. Linting trên tệp js (jshint)
  3. Biên dịch ít tệp hơn (grunt-Contrib-less)

Có các plugin grunt để biên dịch sass, xác minh javascript của bạn, sao chép tệp / thư mục, rút ​​gọn javascript, v.v.

Xin lưu ý rằng plugin grunt cũng là một gói npm.

Câu hỏi 1

Khi tôi muốn thêm một gói (và kiểm tra phần phụ thuộc vào git), thì nó thuộc về đâu - vào package.json hoặc vào bower.json

Nó thực sự phụ thuộc vào nơi mà gói này thuộc về. Nếu nó là một mô-đun nút (như grunt, request) thì nó sẽ đi trong package.json, ngược lại là bower json.

Câu hỏi 2

Khi nào tôi nên cài đặt các gói một cách rõ ràng như vậy mà không thêm chúng vào tệp quản lý các phần phụ thuộc

Không quan trọng bạn đang cài đặt các gói một cách rõ ràng hay đề cập đến sự phụ thuộc trong tệp .json. Giả sử bạn đang làm việc trên một dự án nút và bạn cần một dự án khác, chẳng hạn request, bạn có hai lựa chọn:

  • Chỉnh sửa tệp package.json và thêm phần phụ thuộc vào 'yêu cầu'
  • cài đặt npm

HOẶC LÀ

  • Sử dụng dòng lệnh: npm install --save request

--savetùy chọn cũng thêm phụ thuộc vào tệp package.json. Nếu bạn không chỉ định --savetùy chọn, nó sẽ chỉ tải xuống gói nhưng tệp json sẽ không bị ảnh hưởng.

Bạn có thể làm điều này theo cả hai cách, sẽ không có sự khác biệt đáng kể.

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Sau khi Sarah Palin tán thành Donald Trump vào đầu tuần này, gần như không thể tránh khỏi việc Tina Fey sẽ trở lại Saturday Night Live để thăm lại ấn tượng Palin cổ điển của cô. Và Fey chắc chắn đã không làm thất vọng, cô ấy đã đưa ra một lời khen ngợi không hề nhẹ về bài phát biểu chứng thực Iowa quanh co và khó hiểu của Palin trong khi Trump của Darrell Hammond đưa ra bình luận xuyên suốt.

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Brittney Griner (r.) Ngay từ đầu, thân phận của Brittney Griner đã là tình huống con tin Mỹ độc nhất trong lịch sử hiện đại.

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Chúng ta có thể thấy nhiều hơn nữa về một Julio Jones khỏe mạnh trong khu vực cuối năm nay. John Parker Wilson, Greg McElroy, A.

Đó phải là Đức

Đó phải là Đức

Đối với đội tuyển Anh, không có kẻ thủ ác nào lớn hơn Hầu hết các cổ động viên Anh, nếu không muốn nói là tất cả, hẳn sẽ phải gật gù khi tiếng còi mãn cuộc của trận bán kết lượt về W Euro 2022 vang lên. Bởi vì nó báo hiệu rằng Đức sẽ chờ đợi ở Wembley trong trận chung kết với Anh và là điều duy nhất giữa Anh và chiếc cúp lớn đầu tiên của đội tuyển nữ.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language