Thứ Tư, 3 tháng 5, 2017

Giới thiệu về Babel

Ở bài đầu tiên về series ES6 này mình xin giới thiệu về sơ lược về Babel. Theo như mình được biết thì nó là một công cụ giúp bạn transpiler code ES6 sang chuẩn ES5 ( và các chuẩn khác ) vì lý do ES6 đã ra đời từ năm 2015 nhưng vì nó vẫn chưa hoàn toàn được hỗ trợ trên tất cả trình duyệt nên chúng ta cần một cái gì đó để biên dịch code ES6 sang ES5 cho nó chuẩn không cần chỉnh =)). Tất cả chúng ta cần chính là Babel, các bạn có thể tham khảo thêm về nó tại Babeljs.io


Nội dung bài hôm này mình sẽ demo một ví dụ nho nhỏ về sử dụng Babel + express

Trước tiên các bạn cần cài nodejsnpm cho máy của mình nhé. Ok. Let's go!!!

1. Các bạn mở cmd và gõ lệnh npm init -y để tạo file package.json


2. Tiếp theo bạn tạo một thư mục server trong thư mục server bạn tiếp tục tạo file index.js và dựng 1 con server bằng express nhé. (  các bạn cần cài module express nhé )


3. Bạn chạy con server vừa dựng bằng dòng lệnh node server/index.js và sẽ gặp lỗi này.


Ok. Suốt từ đầu đến giờ mình chưa đụng chạm gì đến thằng babel đúng không nào? Giờ thì chính là lúc nó ra tay để xử lý cái lỗi này. Đơn giản vì import là key của ES6 do vậy chúng ta cần một thức transpiler nó về chuẩn ES5 => Babel chứ còn gì nữa. hehe.

Để sử dụng babel bạn cần:
Bước 1: Cài module babel-clibabel-preser-es2015.
Các bạn vào cmd gõ lệnh npm i --save-dev babel-cli babel-preset-es2015 
Bước 2: Tạo file .babelrc và thêm đoạn code

{
  "presets": ["es2015"]
}

Tiếp theo bạn thêm "start": "babel-node server/index.js" vào file package.json nhé.


Ok. cmd bạn vẫn bật chứ? Gõ dòng lệnh npm start đợi server khởi tạo rồi mở localhost:3000 lên xem bạn đã làm được gì nhé.
Bài tiếp theo mình sẽ cùng nhau tìm hiều về module nodemonwebpack nhưng chỉ là mức cơ bản đủ dùng thui nhé vì kiến thức mình có hạn ^^
Ok. Let's go!!!

Previous Post
Next Post

post written by: