Tiếp nối series về java module hóa trong javascript hôm nay chúng ta sẽ đề cập đến một đề cũng rất quan trọng đó chính là bundeling. Với nodejs hoặc một số framework font-end như Angular 2, React dều recommend viết hướng module và chia ra nhiều file khác nhau đến khi build các file sẽ được gộp lại một file duy nhất và thực thi, còn với các úng dụng tự xây dựng thì sao?. bài viết này sẽ đề cập đến vấn sử dụng browersify và babel để module hóa ứng dụng ra từng file và build lại để dược một ứng dụng hoàn chỉnh, like a boss 😄.
Bundling là gì
Chắc hẳn các bạn cũng không xa lạ gì với thuật ngữ này nữa bundling chính là việc ta chi ứng dụng ra các module một module lưu và một file riêng và require tất các các module cần thiết trong quá trình build.
Bundling thực sự rất có ý nghĩa nhất là với các ứng dụng có scope lớn cũng như team nhiều thành viên hoặc ứng dụng có yêu cầu maintain lâu dài. việc chia ra mỗi module một file chắc chắn sẽ giúp cho quá trình phát triển dễ dàng hơn và hạn chế được nhiều lỗi do các thành viện rọng team gây ra.
Một số cách Bundling
link trực tiếp
Cách đơn gian nhất chính là cứ viết mỗi module một file rồi link từng file vào trang HTML, cách này nói chung khá là bất tiện mỗi khi thêm một module ta lại phải mở trang HTML thêm thêm sửa sửa vừa dễ nhầm vừa mất thơi gian.
Rồi đến khi thay dổi tên module hay đường dẫn thì câu chuyện kinh dị lại tiếp tục, dev lại phải hì hục sửa sửa xóa xóa 😦.
Còn chưa kể cách này thực sự không tốt khi xét đến hiệu năng, số lượng module càng lớn thì số request mà trang thực hiện cũng tăng tho dẫn đến tóc độ load trang sé trở nên rất sờ lâu.
sử dụng require.js
Requirejs là một công cụ JavaScript file and module loader chạy trên trình duyệt khi sử dụng ta chi cần một chút config về đường dẫn đến các module khi ta require module nào nó sẽ tự động load module đó vào trình duyệt. Nghe có có vẻ mọi thứ đề hoàn hảo chỉ trừ một hạn chế nó là hiệu năng vẫn chưa tốt nếu ta chia các module quá nhỏ.
sử dụng webpack
Và rồi Nodejs ra đời với commonjs (một version của requirejs chạy trên node) và systemjs một module loader khác hỗ trợ ES6, đàu tiền các công cụ module loader này tạo ra để phục cụ ứng dụng Nodejs server side nhưng về bạn chất ứng dụng backend hay front end viết bằng js là hoàn taonf giống nhau và hoàn oàn có thể dùng các module loader này đề build ứng dụng front-end giống như làm với back-end vậy.
Như mình đã giới thiệu ở một bài viết trước đây webpack là một cộng cụ build tuyệt vời cho front end app hôm nay a sẽ sử dụng webpack kết hợp với mọt công cụ là babelfy để chuyển cú pháp ES6 về ES5.
Ví dụ
Bỏ qua mớ lý thuyết xuông đi, hôm nay mình sẽ làm 1 ví dụ chỉ mang tính minh họa thôi ạ, vì nghĩ mãi mà không ra cái gì hay ho cả 😄.
Mình sẽ làm 1 ứng dụng gồm hiện thị ra màn hình 3 vận thể 1 quả bóng, một khối hộp và một chú cún, 3 vật thể này sẽ được gắn ngẫu nhiên 3 hành động blink (nhấp nháy ), bounce (nảy) và spin (xoay). cơ bản là thế điều quan trọng là mỗi một class ta sẽ viết trên 1 file.
Chuẩn bị
Đầu tiên ta phải có nodejs và npm, tất nhiên rồi 😃
Tiếp theo là cài wpebpack:
1
npm i -g ưebpack
-tạo thư mục demo và khởi tạo npm project trong thư mục này.
Cài babel-loader và babel-presents-es2015 để dịch ES6
he, suýt nữa quên công việc chính 😄. Về phần javajcript file chính của ta là app.js file này sẽ import các module khác và tạo thành ứng dụng hoàn chỉnh.
render(){ this.container = document.getElementById("container"); var body1 = new Circle(80, 150, 20); var body2 = new Dog(180, 150); var body3 = new Square(400, 150); this.addBody(body1); this.addBody(body2); this.addBody(body3); this.addAnimate(); }
addAnimate(){ this.bodies.forEach((body) => { var action = this.getRandomAction(); body.setBehavior(action); });
getRandomAction(){ var num = Math.floor(Math.random()*(this.actions.length)); var action = newthis.actions[num]; this.actions.splice(num, 1); return action; }
Và bùm!!! bất ngờ chưa? ứng dụng của bạn đã được build ra một file duy nhất dest/main.js bạn hãy mở file index.html trình duyệt và tận hưởng thành quả thôi.
Thành quả
Sau một thời gian code miệt mài cuối cùng ta sẽ có thành quả sau:
Có lẽ bài này code hơi dài nhỉ, cái mình muốn show ở đây là cách chúng ta tạo ra app chứ không phải kết quả, mấy cái hiệu ứng nhảm shit này bất cứ ai phẩy tay cái cũng ra được. bạn sẽ thấy cách này tốt khi bạn bắt đầu xây dựng những sản phẩm thực sự, rồi càn maintain nhiều refactor thường xuyên mà nhân sự lại thay đổi liên tục.
Cảm ơn các bạn đã theo dõi bài viết. xin hẹn gặp lại ở bài viết sau.