Asked Jul 22nd, 2019 3:47 AM 3012 2 1
  • 3012 2 1
+1

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

Share
  • 3012 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 !

Jul 22nd, 2019 4:14 AM

1 ANSWERS


Answered Jul 22nd, 2019 4:15 AM
Accepted
+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)

Share
Avatar Hoang vn @wiliamfeng
Jul 22nd, 2019 4:39 AM

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à

0
| Reply
Share
Jul 22nd, 2019 8:52 AM
Jul 23rd, 2019 12:48 AM

@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

+1
| Reply
Share
Avatar Hoang vn @wiliamfeng
Jul 23rd, 2019 10:27 AM

@HuyDQ tks bạn nhiều nha

0
| Reply
Share
Jul 24th, 2019 8:34 AM

@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

+1
| Reply
Share
Jul 25th, 2019 12:46 AM

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

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.