Sự nhầm lẫn giữa Babel và Browserify/Webpack

Question

Câu hỏi nhanh. Tôi hơi bối rối về ES2015 (ES6).

Giả sử tôi sử dụng Babel để biên dịch sang ES6 Javascript để tuân thủ ES5 cho các trình duyệt hiện tại.

nhập/xuất chức năng đã có sẵn trong ES6 bằng cách sử dụng Babel. Vậy tại sao tôi cần một cái gì đó như Browserify hoặc Webpack nếu tôi chỉ đơn giản sử dụng những thứ này để kết hợp các mô-đun của tôi, khi ES6 có thể làm điều đó cho tôi?

Ở mọi nơi tôi đến, tôi thấy những người đang sử dụng Babel kết hợp với Browserify hoặc Webpack. Mặc dù tôi biết một cái gì đó như Webpack có thể được sử dụng cho nhiều hơn, nhưng tôi tự hỏi nếu nó cũng có thể bó các tập tin bằng cách sử dụng cú pháp ES6.

Tôi có thể hoàn toàn sai ở đây và tôi có thể đã bị lạc trong Rừng Javascript năm 2016, vì vậy tôi hy vọng ai đó có thể làm rõ điều này cho tôi.

Sửa

Tôi có quyền cho rằng các chức năng ES6 nhập khẩu/xuất khẩu có nguồn gốc chỉ đơn giản là không file bó? Từ những gì tôi đã đọc cho đến nay tôi nghĩ bạn vẫn cần phải bao gồm tất cả các tệp Javascript riêng biệt nhưng bạn chỉ cần nhập mô-đun vào không gian tên của nhau bằng cách sử dụng chức năng nhập gốc?

Answer 1

Pre-ES6 không có hệ thống mô-đun gốc, do đó, có nhiều hệ thống được xây dựng trong mã người dùng (ví dụ: mô-đun CommonJS/Node và AMD). Đó là những gì Babel chuyển đổi cú pháp mô-đun ES6 thành (và có, chính xác là cú pháp mô-đun ES6 không có câu chuyện gốc nào). Trình duyệt không có kiến ​​thức về các API của người dùng đó. Nút thực hiện hệ thống mô-đun của nó bằng cách gói một "mô-đun" trong một chức năng tiêm require() vv. Trong trình duyệt require() sẽ chỉ là một lỗi tham chiếu. Browserify (hoặc một trình bundler khác) làm cho nó hoạt động trong trình duyệt và gộp toàn bộ đồ thị phụ thuộc vào một tập lệnh duy nhất. Vì vậy, nếu mã dành cho trình duyệt bạn có thể sẽ muốn gói nó. Nếu đó là cho Node bạn có thể không cần.

Các chức năng import/export

Không chức năng, tờ khai.

nếu tôi chỉ đơn giản sử dụng những thứ này để kết hợp các mô-đun của mình, khi ES6 có thể làm điều đó cho tôi?

Tôi tự hỏi liệu có thể gộp các tệp bằng cú pháp ES6 hay không.

Tôi có quyền giả định rằng chức năng nhập/xuất ES6 gốc đơn giản không đóng gói tệp không?

Có. Không có cách nào để gói các mô đun ES6. Bạn có thể chuyển đổi cú pháp mô-đun ES6 thành một cái gì đó giống như các mô-đun Node và gói chúng.

Từ những gì tôi đã đọc cho đến nay tôi nghĩ bạn vẫn cần bao gồm tất cả các tệp Javascript riêng biệt nhưng bạn chỉ cần nhập mô-đun vào không gian tên của nhau bằng cách sử dụng chức năng nhập gốc?

Điều quan trọng là nhận ra rằng mặc dù cú pháp được chuẩn hóa nhưng rất nhiều hành vi không phải là. Có một thông số Loader đang được phát triển để xác định cách thức mô-đun sẽ thực sự được định vị và tải.

Xem thêm https://stackoverflow.com/a/33044085/1034448.

Answer 2

Có, sử dụng babel để transpile nhập ES6 của bạn vào ES5 sẽ hoạt động.

Tuy nhiên, một lợi thế của việc sử dụng webpack là tạo ra một tệp tĩnh được phân phát trong môi trường sản xuất của bạn.