Khi làm việc cùng Javascript, đôi khi ta cảm thấy thật phiền toái khi áp dụng các cú pháp mới nhất thì code chạy được trên trình duyệt này, lại chết trên trình duyệt khác, hay cùng một trình duyệt version mới nhất thì ok, nhưng lại ngắc ngoải trên version thấp hơn vì chưa được support. Thật may mắn, thay vì phải lo lắng thay đổi code cho phù hợp cho từng trình duyệt, một công cụ được sinh ra để giải quyết vấn đề đó là babel. Babel được dùng với mục đích chuyển đổi mã lệnh JavaScript được viết dựa trên tiêu chuẩn ECMAScript phiên bản mới về phiên bản cũ hơn để tương thích với hầu hết các trình duyệt.
1. Cài đặt
1 2 | npm install -D babel-loader @babel/core @babel/preset-env webpack |
Trong đó
babel-loaderlà module loader cho webpack@babel/corelà core của babel@babel/preset-envlà babel preset cho mỗi môi trường. Example environments: chrome, opera, edge, firefox, safari, ie, ios, android, node, electron
2. Basic usage
Cấu trúc file và folder như sau
1 2 3 4 5 6 7 8 | webpack-demo ... |- dist/ - index.html |- src/ - index.js |- webpack.config.js |
Code file dist/index.html
1 2 3 4 5 6 7 8 9 10 11 | <span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Webpack từ A đến Á cùng kentrung<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script" /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> |
Code file src/index.js
1 2 3 | <span class="token keyword">const</span> author <span class="token operator">=</span> <span class="token string">'kentrung'</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Webpack từ A đến Á cùng </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>author<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> |
Chém gió tí là ở trên tuy chỉ có hai dòng nhưng mình đã sử dụng syntax mới của ES6 đó là khai báo biến const thay cho var và sử dụng Template Literals để thực thi biểu thức trong chuỗi. Code ngày xưa thì viết kiểu này
1 2 3 | <span class="token keyword">var</span> author <span class="token operator">=</span> <span class="token string">'kentrung'</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Webpack từ A đến Á cùng '</span> <span class="token operator">+</span> author<span class="token punctuation">)</span> |
Chém gió thế thôi, giờ để sử dụng babel loader ta sửa lại file webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> mode<span class="token operator">:</span> <span class="token string">'development'</span><span class="token punctuation">,</span> entry<span class="token operator">:</span> <span class="token string">'./src/index.js'</span><span class="token punctuation">,</span> output<span class="token operator">:</span> <span class="token punctuation">{</span> filename<span class="token operator">:</span> <span class="token string">'main.js'</span><span class="token punctuation">,</span> path<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'dist'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> module<span class="token operator">:</span> <span class="token punctuation">{</span> rules<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> test<span class="token operator">:</span> <span class="token regex">/.m?js$/</span><span class="token punctuation">,</span> exclude<span class="token operator">:</span> <span class="token regex">/(node_modules|bower_components)/</span><span class="token punctuation">,</span> use<span class="token operator">:</span> <span class="token punctuation">{</span> loader<span class="token operator">:</span> <span class="token string">'babel-loader'</span><span class="token punctuation">,</span> options<span class="token operator">:</span> <span class="token punctuation">{</span> presets<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'@babel/preset-env'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Giờ chạy lại webpack xem thế nào: npm run dev
Ta mở trang index.html và thấy log ra đúng câu mong muốn.
1 2 | Webpack từ A đến Á cùng kentrung //index.js:2 |
Mình click thử vào dòng 2 xem code thế nào
1 2 3 | <span class="token keyword">var</span> author <span class="token operator">=</span> <span class="token string">'kentrung'</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Webpack tu1EEB A u0111u1EBFn xC1 cxF9ng "</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>author<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Thật là vi diệu! Nói chung với dự án còi zư này thì cấu hình này là ok lắm rồi, đối với các dự án lớn siêu to khổng lồ thì các bạn sẽ phải đào sâu thêm vào thư viện để config còn ở đây chỉ mang tính chất giới thiệu mơn trớn thôi.
Bài viết đến đây là hết, hi vọng với bài viết này các bạn đã thêm được nhiều kiến thức bổ ích. Hẹn gặp lại các bạn ở bài viết tiếp theo!
Tham khảo thêm các cấu hình khác cho Babel loader tại: