Yêu cầu thg 7 22, 2019 3:47 SA 5005 2 1
  • 5005 2 1
+2

Phân biệt cú pháp : require và import

Chia sẻ
  • 5005 2 1

Trong Node.js mình thấy dùng cú pháp requiremodule.exports để sử dụng một thư viện hay module nào đó. Trong React mình lại thấy dùng cú pháp importexports.

Mình đang thắc mắc giữa hai cách này có điểm gì khác biệt, tại sao không thống nhất về cùng một cách viết để tránh gây nhầm lẫn cho developer nhỉ ?

Nhờ các bạn giải thích giúp m. Mình có Google qua nhưng đọc tiếng anh hơi kém nên chưa clear được vấn đề.

Rất cám ơn các bạn !

thg 7 22, 2019 4:14 SA

1 CÂU TRẢ LỜI


Đã trả lời thg 7 22, 2019 4:15 SA
Đã được chấp nhận
+7

requiremodule.exports là cách thức mặc định để bạn sử dụng một thư viện hay một module trong javascript (CommonJS) hay NodeJS. Còn cú pháp bạn thấy trong Reactimport hay export là các tính năng mới của ES6. Tuy nhiên trên thực tế thì lúc bạn dev thì sẽ dùng import, export như bạn nói trên còn khi bạn thực hiện build ra code production thì toàn bộ code của bạn sẽ chạy qua các bộ complie như Babel và nó sẽ chuyển cú pháp importexport về dạng requiremodule.exports thông thường. NodeJS bạn cũng có thể sử dụng importexport, cụ thể bạn có thê tham khảo ở đây https://nodejs.org/api/esm.html (lưu ý đây vẫn là tính năng thử nghiệm)

Chia sẻ
Avatar Hoang vn @wiliamfeng
thg 7 22, 2019 4:39 SA

vâng cám ơn bạn. Còn ý này của mình ban có thể giải thích thêm được không: tại sao không thống nhất về cùng một cách viết để tránh gây nhầm lẫn cho developer ?

Hay nói cách khác sao thằng ES6 phải sinh ra thêm cách viết mới trong khi cách viết thông thường với require và module.exports mình thấy cũng ngắn gọn rồi mà

thg 7 22, 2019 8:52 SA
thg 7 23, 2019 12:48 SA

@wiliamfeng theo mình biết thì require và module.exports nó kiểu là tiêu chuẩn cho NodeJS hay nói cách khác là bên server còn import và export lại là tiêu chuẩn cho bên ứng dụng client như React, Vue. Thêm nữa với việc sử dụng cú pháp import và export cho phép các bộ complie như Webpack hay Rollout thực hiện được một tác vụ gọi là Tree Shaking tốt hơn. Quá trình này bạn có thể hiểu nôm na là nó sẽ giúp loại bọ các đoạn code thừa từ các thư viện mà bạn import và build ra bản cuối cùng có size nhỏ nhất để tránh việc client phải tải quá nhiều code

Avatar Hoang vn @wiliamfeng
thg 7 23, 2019 10:27 SA

@HuyDQ tks bạn nhiều nha

thg 7 24, 2019 8:34 SA

@HuyDQ commonJs là 1 tiêu chuẩn cho js và es6 cũng thế, có điều commonJs ra đời sớm hơn nên được support nhiều hơn, 1 số trình duyệt chưa sp full es6, nên babel compiler phải dịch sang es5.

require với import cũng có nhiều khác biệt.

require có thể dynamic import, import statement thì không, phải dùng import expression

require là sync, import expression ( import () ) là async

thg 7 25, 2019 12:46 SA

@Plumpboy cảm ơn bạn đã bổ sung cho mình

Avatar Faker @huyhoang5804
thg 3 27, 2022 1:47 CH

Nó đang dùng require mà mình thay từ require bằng từ import thì có được không b?

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí