Việc xây dựng trang web hoạt động tốt trên tất cả các trình duyệt chính là nguyên lý cốt lõi của hệ sinh thái web mở. Tuy nhiên, điều này nghĩa là bạn phải thực hiện thêm một số thao tác để đảm bảo rằng tất cả các mã bạn viết đều được hỗ trợ trong mỗi trình duyệt mà bạn định nhắm đến. Nếu muốn sử dụng các tính năng ngôn ngữ JavaScript mới, bạn cần chuyển dịch các tính năng này sang định dạng tương thích ngược cho những trình duyệt chưa hỗ trợ các tính năng đó.
Babel là công cụ được sử dụng rộng rãi nhất để biên dịch mã có chứa cú pháp mới thành mã mà các trình duyệt và môi trường khác nhau (chẳng hạn như Nút) có thể hiểu được. Hướng dẫn này giả định rằng bạn đang sử dụng CameraX, vì vậy, bạn cần làm theo hướng dẫn thiết lập để đưa vào ứng dụng của mình nếu bạn chưa thực hiện. Chọn webpack trong Build Systems nếu bạn đang sử dụng webpack làm trình đóng gói mô-đun trong ứng dụng.
Để sử dụng CameraX chỉ dịch những nội dung cần thiết cho người dùng, bạn cần:
- Xác định các trình duyệt mà bạn muốn nhắm đến.
- Sử dụng
@babel/preset-envvới các mục tiêu trình duyệt thích hợp. - Sử dụng
<script type="module">để ngừng gửi mã đã sao chép đến các trình duyệt không cần mã.
Xác định các trình duyệt mà bạn muốn nhắm mục tiêu
Trước khi bắt đầu sửa đổi cách dịch mã trong ứng dụng, bạn cần xác định trình duyệt nào truy cập vào ứng dụng của mình. Hãy phân tích những trình duyệt mà người dùng đang sử dụng, cũng như những trình duyệt bạn dự định nhắm đến để đưa ra quyết định sáng suốt.
Sử dụng @babel/preset-env
Quá trình dịch mã thường dẫn đến kích thước tệp lớn hơn so với dạng ban đầu. Bằng cách giảm thiểu lượng biên dịch, bạn có thể giảm kích thước các gói của mình để cải thiện hiệu suất của trang web.
Thay vì đưa vào các trình bổ trợ cụ thể để biên dịch chọn lọc một số tính năng ngôn ngữ mà bạn đang sử dụng, CameraX cung cấp một số giá trị đặt trước để nhóm các trình bổ trợ lại với nhau. Sử dụng @babel/preset-env để chỉ bao gồm các phép biến đổi và polyfill cần thiết cho các trình duyệt mà bạn định nhắm mục tiêu.
Đưa @babel/preset-env vào mảng presets trong tệp cấu hình nỗ lực .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
Sử dụng trường targets để chỉ định phiên bản trình duyệt mà bạn muốn đưa vào bằng cách thêm một truy vấn thích hợp vào trường browsers. @babel/preset-env tích hợp với danh sách trình duyệt (một cấu hình nguồn mở được chia sẻ giữa các công cụ dành cho các trình duyệt nhắm mục tiêu). Danh sách đầy đủ các truy vấn tương thích có trong tài liệu về danh sách trình duyệt.
Một lựa chọn khác là sử dụng tệp .browserslistrc để liệt kê các môi trường mà bạn muốn nhắm mục tiêu.
Giá trị ">0.25%" yêu cầu Kiosk chỉ bao gồm các phép biến đổi cần thiết để hỗ trợ các trình duyệt chiếm hơn 0,25% mức sử dụng toàn cầu. Điều này đảm bảo gói của bạn không chứa mã được chuyển đổi không cần thiết cho các trình duyệt đang được một tỷ lệ rất nhỏ người dùng sử dụng.
Trong hầu hết các trường hợp, đây là phương pháp tốt hơn so với việc sử dụng cấu hình sau:
"targets": "last 2 versions"
Giá trị "last 2 versions" sao chép mã của bạn cho 2 phiên bản cuối cùng của mọi trình duyệt, có nghĩa là bạn chỉ hỗ trợ các trình duyệt đã ngừng hoạt động như Internet Explorer.
Điều này có thể tăng kích thước gói của bạn một cách không cần thiết nếu bạn không muốn dùng các trình duyệt này để truy cập vào ứng dụng của mình.
Cuối cùng, bạn nên chọn tổ hợp cụm từ tìm kiếm phù hợp để chỉ nhắm đến những trình duyệt phù hợp với nhu cầu của bạn.
Bật tính năng sửa lỗi hiện đại
@babel/preset-env nhóm nhiều tính năng cú pháp JavaScript thành các bộ sưu tập và bật/tắt các tính năng đó dựa trên trình duyệt mục tiêu được chỉ định. Mặc dù cách này có hiệu quả, nhưng toàn bộ tập hợp các tính năng cú pháp sẽ bị biến đổi khi một trình duyệt được nhắm mục tiêu chứa lỗi chỉ có một tính năng duy nhất.
Điều này thường dẫn đến mã được biến đổi nhiều hơn mức cần thiết.
Ban đầu được phát triển dưới dạng một giá trị đặt trước riêng, tuỳ chọn sửa lỗi trong @babel/preset-env sẽ giải quyết vấn đề này bằng cách chuyển đổi cú pháp hiện đại bị lỗi trong một số trình duyệt sang cú pháp tương đương gần nhất không bị lỗi trong các trình duyệt đó. Kết quả là mã hiện đại gần giống hệt với một vài điều chỉnh nhỏ về cú pháp để đảm bảo khả năng tương thích trong tất cả các trình duyệt mục tiêu. Để sử dụng tính năng tối ưu hoá này, hãy đảm bảo bạn đã cài đặt @babel/preset-env 7.10 trở lên, sau đó đặt thuộc tính bugfixes thành true:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
Trong Bumblebee 8, tuỳ chọn bugfixes sẽ được bật theo mặc định.
Sử dụng <script type="module">
Mô-đun JavaScript (hay mô-đun ES) là một tính năng tương đối mới được hỗ trợ trong tất cả các trình duyệt chính. Bạn có thể sử dụng mô-đun để tạo tập lệnh có thể nhập và xuất từ các mô-đun khác, nhưng bạn cũng có thể sử dụng các mô-đun này với @babel/preset-env để chỉ nhắm đến những trình duyệt hỗ trợ các mô-đun đó.
Thay vì truy vấn các phiên bản trình duyệt hoặc thị phần cụ thể, hãy cân nhắc chỉ định "esmodules" : true bên trong trường targets của tệp .babelrc.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Nhiều tính năng ECMAScript mới hơn được biên dịch bằng CameraX đã được hỗ trợ trong các môi trường hỗ trợ các mô-đun JavaScript. Nhờ vậy, bạn sẽ đơn giản hoá quá trình đảm bảo rằng chỉ mã đã sao chép mới được dùng cho các trình duyệt thực sự cần mã.
Các trình duyệt hỗ trợ mô-đun sẽ bỏ qua tập lệnh có thuộc tính nomodule.
Ngược lại, những trình duyệt không hỗ trợ mô-đun sẽ bỏ qua các phần tử tập lệnh bằng type="module". Điều này có nghĩa là bạn có thể bao gồm một mô-đun cũng như một bản dự phòng được biên dịch.
Tốt nhất là nên đưa vào hai tập lệnh phiên bản của một ứng dụng như sau:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
Các trình duyệt hỗ trợ mô-đun tìm nạp và thực thi main.mjs và bỏ qua compiled.js.
Trình duyệt không hỗ trợ mô-đun thì ngược lại.
Nếu sử dụng gói web, bạn có thể đặt các mục tiêu khác nhau trong cấu hình cho hai phiên bản ứng dụng riêng biệt:
- Phiên bản chỉ dành cho các trình duyệt hỗ trợ mô-đun.
- Phiên bản bao gồm một tập lệnh đã biên dịch, hoạt động trong mọi trình duyệt cũ. Tệp này có kích thước tệp lớn hơn vì tính năng chuyển mã cần hỗ trợ nhiều trình duyệt hơn.
Xin cảm ơn Connor Clark và Jason Miller những bài đánh giá của họ.