ES6 Modules, Javascript và cách sử dụng require ngay trên browser
Hầu hết các bạn lập trình viên sau khi đã làm việc với ngôn ngữ này - Javascript hay JS - trong một khoảng thời gian thì sẽ nhận ra được những điểm yếu mà ngôn ngữ này gặp phải. Một trong số là việc chia file Javascript để khiến cho việc kiến trúc ứng dụng hay hệ thống trở nên thuận tiện hơn.
Hôm nay sẽ không phải là một bài quá chuyên về kỹ thuật như những hôm trước mà mình sẽ chia sẻ một tip nhỏ để cải thiện việc lập trình bằng Javascript.
Hầu hết các bạn lập trình viên sau khi đã làm việc với ngôn ngữ này - Javascript hay JS - trong một khoảng thời gian thì sẽ nhận ra được những điểm yếu mà ngôn ngữ này gặp phải.
Một trong số đó là việc chia file Javascript để khiến cho việc kiến trúc ứng dụng hay hệ thống trở nên thuận tiện hơn. Đối với Vanilla Javascript hay Javascript thuần thì để làm được việc này, tụi mình phải đặt những script tag trong file html đè lên nhau theo mô hình kế thừa. Để các bạn thấy dễ hiểu hơn thì mình có ví dụ sau:
Như thường lệ thì khi chúng ta để tất cả source code trong 1 file HTML như này thì chắc chắn chương trình vẫn sẽ chạy bình thường. Nhưng nhìn vào mặt kiến trúc của chương trình thì rõ ràng nó rất lộn xộn, đáng lẽ chúng ta nên đễ class Person trong một file riêng đúng không.
Vậy để chia script javascript thì phải làm như thế nào? Bằng cách này
BƯỚC 1: Chia file javascript ra thành 2 file riêng biệt
BƯỚC 2: Chèn 2 script tag vào file HTML
Vậy nếu chương trình của tụi mình càng ngày càng lớn và có tới 100-1000 file liên quan đến nahu thì sao? Tụi mình chắc chắn sẽ phải gắn 1000 script tag vào file html, và chưa kể chúng ta còn có nhiều file html khác nhau nữa. Nên là cách này không tối ưu và rất là rắc rối.
SỬ DỤNG REQUIRE TRÊN BROWSER VỚI BROWSERIFY
browserify
Nếu các bạn chưa biết browserify là gì thì nôm na browserify hỗ trợ bạn chạy require một module ngay trên trình duyệt. Đầu tiên các bạn phải khởi tạo npm trong thư mục
npm init -ySau khi đã khởi tạo npm thì các bạn sẽ tải browserify qua command
npm install -g browserifyTiếp theo là bước setup browserify để sử dụng. Bên trong file package.json mình sẽ tạo một dòng lệnh như sau:
Các bạn có thể chạy thằng browserify trên terminal nhưng để cho tiện thì mình sẽ tạo để chạy bằng npm nha. Tiếp theo là export class Person từ file Person.js
Và require class Person vừa được export trong file script.js
Hoàn tất các bước trên rồi thì chạy thôi.
Sau khi chạy thì ở bên cây thư mục, các bạn để ý thì sẽ thấy một folder tên là dist chứa một file gọi là bundle.js
Mở file index.html lên và xóa 2 script tag vừa nãy, thay bằng script tag dẫn đến file bundle.js
Woohooo, vậy là đã xong. Để mình chạy thử xem kết quả như nào nha
Đấy vậy là chúng ta đã thành công công cuộc chia file kiến trúc một ứng dụng javascript. Ngoài ra browserify còn có những chức năng khác như hỗ trợ bundlize trên nhiều file (trong trường hợp ứng dụng của các bạn có nhiều hơn 1 trang). Hay
HOT-LOADING BUNDLIZATION VỚI WATCHIFY.JS
browserifyWatchify sẽ hỗ trợ tụi mình trong việc giảm bớt gánh nặng bundlize file trong khi lập trình. Sẽ thật phiền phức nếu cứ mỗi lần chỉnh 1 tí trong các file thì tụi mình lại phải bundlize tụi nó lại 1 lần đúng không? Nên là watchify sẽ liên tục watch và tiến hành bundlize nếu có bất cứ thay đổi nào trên các file có liên kết với file được bundlize (Ở đây là file script.js như ví dụ trên).
IMPORT/EXPORT VỚI ESMIFY
mattdesl
Đơn giản chỉ là thay require & module export với import & export thôi. 😀
Tóm lại thì Browserify hay Watchify và Esmify là một npm package được sử dụng rất rộng rãi và thậm chí còn được mệnh danh là một trong các "tứ hoàng" của hệ sinh thái Javascript (mình sẽ viết riêng về bài này sau nhé). Thậm chí những mạng xã hội Facebook mà các bạn hay dùng sử dụng React.js - là một frontend library có sử dụng Browserify để import modules.
Tham khảo:
Christian Alfoni