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. Ơn zời thay vì phải lo lắng thay đổi code 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
Link trang chủ Babel: https://babeljs.io/
npm install -D babel-loader @babel/core @babel/preset-env webpack
Trong đó
babel-loader
là module loader cho webpack@babel/core
là core của babel@babel/preset-env
là babel preset cho mỗi môi trường. Example environments: chrome, opera, edge, firefox, safari, ie, ios, android, node, electron
2. Cấu hình cơ bản
Cấu trúc folder và file như sau
webpack-demo
...
|- dist/
- index.html
|- src/
- index.js
|- webpack.config.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack từ A đến Á cùng kentrung</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
const author = 'kentrung'
console.log(`Webpack từ A đến Á cùng ${author}`)
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 (Template Strings)
để thực thi biểu thức trong chuỗi. Code ngày xưa thì viết kiểu này
var author = 'kentrung'
console.log('Webpack từ A đến Á cùng ' + author)
Chém gió thế thôi, giờ để sử dụng babel loader ta sửa lại file webpack.config.js
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}
Giờ chạy lại webpack xem thế nào: npm run dev
Ta mở trang dist/index.html
và thấy log ra đúng câu mong muốn.
//index.js:2
Webpack từ A đến Á cùng kentrung
Mình click thử vào dòng 2 xem code thế nào
var author = 'kentrung';
console.log("Webpack tu1EEB A u0111u1EBFn xC1 cxF9ng ".concat(author));
Ảo thật đấy! Nói chung với zăm ba dự án còi như 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:
- https://webpack.js.org/loaders/babel-loader
- https://babeljs.io/
- Source code github: https://github.com/kentrung/webpack-tutorial
- Series webpack: https://viblo.asia/s/webpack-tu-a-den-a-cung-kentrung-pmleB8Am5rd
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Cài đặt2. Cấu hình cơ bản1. Bảo vệ...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Cài đặt2. Cấu hình cơ bản1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được phát hành miễn phí để tăng...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Cài đặt2. Cấu hình cơ bảnV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng đường dẫn đầy đủ Xét đoạn...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Cài đặt2. Cấu hình cơ bảnV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm đọc file và tin tưởng đầu...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Cài đặt2. Cấu hình cơ bảnIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các lỗ hổng Directory traversal cũng khác...