Bưu kiện, một gói web đơn giản hơn

Bưu kiện là một Trình gói ứng dụng web. Nó nằm trong cùng một danh mục công cụ của webpack, với một đề xuất giá trị khác. Parcel hứa hẹn sẽ làm được nhiều thứ mà không cần bất kỳ cấu hình nào và cũng nhanh chóng.

Bưu kiện là một Trình gói ứng dụng web.

Nó nằm trong cùng một danh mục công cụ củawebpack, với một đề xuất giá trị khác.

Bộ tính năng chính của nó bao gồm

  • gói nội dung (JS, CSS, HTML, hình ảnh)
  • không tách mã cấu hình
  • chuyển đổi tự động bằng cách sử dụngBabel,PostCSSvà PostHTML
  • thay thế mô-đun nóng
  • bộ nhớ đệm và xử lý song song để xây dựng nhanh hơn

Parcel hứa hẹn sẽ thực hiện tất cả những điều này mà không cần bất kỳ cấu hình nào và cũng nhanh chóng.

Cài đặt

Gói được cài đặt bằngSợi:

yarn global add parcel-bundler

hoặc lànpm:

npm install -g parcel-bundler

Bắt đầu bưu kiện

Có thể bắt đầu sử dụng bưu kiện

parcel watch index.html

nó sẽ bắt đầu quét các nội dung từ nguồn trang HTML và thay thế bất kỳ tham chiếu nào mà nó xử lý bằng một tệp đầu ra.

Thay vào đó, bạn cũng có thể trỏ Parcel đến một tệp JS:

parcel watch entry.js

Máy chủ phát triển

Tiện lợi Parcel đi kèm với một máy chủ phát triển tích hợp sẵn, vì vậy bạn không cần phải thiết lập một máy chủ. Bạn có thể bắt đầu nó bằng:

parcel index.html

Gói sẵn sàng sản xuất

Khi bạn hài lòng với ứng dụng của mình và bạn muốn tạo một gói sẵn sàng sản xuất, hãy chạy

parcel build index.html

Gói sản xuất vô hiệu hóa việc thay thế mô-đun nóng và không theo dõi các thay đổi của bạn, gói này tồn tại sau khi hoàn tất quá trình đóng gói và sử dụng bộ thu nhỏ.

Nó cũng tự động kích hoạtNODE_ENVbiến thànhproduction, để làm cho các thư viện tạo mã sản xuất (ví dụ: React vàVuesử dụng quy ước này)

Tài sản

JavaScript

Bưu kiện hỗ trợ cả haiMô-đun ES(import...) vàCommonJS(require...).

Nó thực hiệnTách mã tự động bằng cách sử dụng nhập động.

Điều này có nghĩa là gì, và tại sao điều này lại hữu ích?

Một phép nhập động trả về mộtlời hứavà thay vì tải tất cả các phần phụ thuộc khi khởi động ứng dụng, chúng tôi có thể yêu cầu trình duyệt tải chúng, nhưng chỉ thực thi một số phần của ứng dụng khi chúng đã sẵn sàng.

Hoặc, chúng tôi có thể yêu cầu trình duyệt chỉ tải chúng khi chúng tôi cần, chẳng hạn như khi người dùng nhấp vào một liên kết cụ thể.

Xemtách mãđể biết thêm chi tiết.

CSS

Parcel hỗ trợ CSS thuần túy, Sass, Less và Stylus.

Bạn có thể viết CSS của mình bằngMô-đun CSS.

Biến đổi

Khi Parcel tìm thấy bạn có cấu hình cho một trong các

  • Babel (.babelrc)
  • PostCSS (.postcssrc)
  • PostHTML (.posthtmlrc)

nó sẽ tự động sử dụng nó trong quá trình đóng gói.

Thay thế mô-đun nóng

Thay thế mô-đun nóng (HMR) là một tính năng hữu ích khi xây dựng một ứng dụng. Khi chúng tôi lưu bản sao CSS hoặc JavaScript mới, HMR sẽ đảm nhận việc cập nhật mô-đun trong trình duyệt mà không làm mới toàn bộ ứng dụng.

Điều này rất thú vị, đặc biệt nếu ứng dụng của bạn có nhiều trạng thái mà bạn cần kích hoạt để kiểm tra một chức năng cụ thể (ví dụ: “vào cài đặt, nhấp vào cái này, nhập cái kia…”).

Bưu kiện so với gói web

Hãy so sánh Parcel với webpack, bởi vì nó rất phổ biến và bạn có thể đã nghe nói về nó hoặc sử dụng nó trong một dự án. Thật tuyệt khi biết sự khác biệt ngay cả khi bạn chưa bao giờ sử dụng bất kỳ thứ gì trong số chúng.

webpack cho phép bạn làm rất nhiều thứ và mặc dù điều này rất thú vị, nhưng cũng có nghĩa là chúng ta cần phải cấu hình cẩn thận để làm chính xác những gì chúng ta muốn.

Đôi khiwebpack.config.jstệp phát triển lên hàng trăm dòng và chúng tôi sao chép / dán nó vào dự án tiếp theo, và thật khó nếu chúng tôi cần sửa đổi nó.

Parcel hứa với chúng tôi sẽ làm được rất nhiều điều mà webpack làm được, nhưnghoàn toàn không có bất kỳ cấu hình nào, Dựa vàoquy ước về cấu hình.

webpack 4, chủ yếu để đáp lại sự thành công của Parcel, đã giới thiệu chế độ không cấu hình, với một số quy ước, thay vì luôn yêu cầu cấu hình.

Trong khi webpack cóhàng ngàn plugin, Bưu kiện cómột số, nhưng chúng không được quảng cáo trên trang web, một dấu hiệu cho thấy các nhà phát triển của Parcel muốn chúng tôi tránh sử dụng các plugin cho đến khi chúng tôi thực sự không thể tránh chúng vì chúng tôi không thể thích ứng với các quy ước của Parcel hoặc để làm cho Parcel hỗ trợ một cái gì đó mà nó không ra khỏi hộp.

Bạn nên sử dụng cái nào?Tôi muốn giới thiệu Parcel cho các dự án nhỏ và webpack khi bạn phát triển hết khả năng của nó và bạn muốn kiểm soát tuyệt đối mọi thứ mà trình gói mô-đun của bạn thực hiện.


Các hướng dẫn khác dành cho devtools: