Tôi đã tự hỏi liệu tôi có thể phát hiện xem trình duyệt của khách hàng có tương thích với ES2015 hay không . Và nếu không, tôi sẽ chỉ bao gồm thư viện JS cũ của tôi.
Bạn không thể làm điều đó, đơn giản vì AFAIK không có trình duyệt hỗ trợ đầy đủ ES2015. Ngoài ra, bạn không thực sự muốn duy trì hai phiên bản mã khác nhau của bạn, bởi vì nó rất đau đớn và nó có thể rất lộn xộn.
Cách tiếp cận ngày nay là sử dụng bộ thu thập transpiler, là trình biên dịch biên dịch mã ES2015 của bạn thành ES5 (JavaScript mà mọi trình duyệt đều biết). Nó vẫn còn khá lộn xộn, nhưng ít nhất bạn cũng chỉ viết một phiên bản mã của bạn, và đó là ES2015.
Tôi nghĩ Babel (trước đây là 6to5) là trình chuyển đổi phổ biến nhất. Bạn có thể xem trang web của họ để bắt đầu.
Như để trả lời câu hỏi thực tế của bạn,
Làm thế nào để phát hiện nếu trình duyệt tương thích với ES2015
Bạn có thể làm điều đó bằng nhiều cách. Tôi không chắc chắn những gì có thể là một đáng tin cậy nhất, nhưng ví dụ bạn chỉ có thể thử trên giao diện điều khiển của trình duyệt của bạn:
'Promise' in window
Nếu tuyên bố này trở true, sau đó các trình duyệt hiện tại hỗ trợ những lời hứa, đó là một tính năng mới của ES2015, vì vậy bạn có thể giả định rằng nó hỗ trợ hầu hết các tính năng của ES2015.
Điều này là không đủ đối với hầu hết các trường hợp; bạn có thể muốn chắc chắn 100% rằng những gì bạn đang sử dụng sẽ không ném SyntaxError vào bất kỳ trình duyệt cũ nào.
Một giải pháp có thể là kiểm tra thủ công từng tính năng bạn muốn sử dụng. Ví dụ, nếu bạn cần Fetch API, bạn có thể tạo một hàm mà nói với bạn nếu trình duyệt hiện nay hỗ trợ nó:
function isFetchAPIsupported() {
return 'fetch' in window;
}
Bạn có thể làm điều này cho bất kỳ API mới mà bạn cần.Tuy nhiên, nếu bạn cần một cái gì đó cú pháp khác nhau, tôi nghĩ rằng đặt cược duy nhất của bạn là eval() (như Katana314 gợi ý). Ví dụ: để kiểm tra hỗ trợ cho các tham số còn lại bạn có thể thực hiện:
function isRestSupported() {
try {
eval('function foo(bar, ...rest) { return 1; };');
} catch (error) {
return false;
}
return true;
}
Điều này rất hữu ích trong Firefox, vì các thông số còn lại được hỗ trợ. Nó hoạt động tốt trên Safari, trả lại false vì thông số còn lại là chưa được hỗ trợ ở đó.
Hiện tại, không có trình duyệt nào tương thích với toàn bộ * ES2015 *. Xem https://kangax.github.io/compat-table/es6/ –
Câu hỏi hay. Đối với người mới bắt đầu, tôi nghĩ điều này sẽ được áp dụng tốt nhất làm cấu hình trình quản lý phụ thuộc để điều này sẽ tải phiên bản thay thế của tập lệnh. Đối với phát hiện, tôi tự hỏi, nếu phương pháp đơn giản nhất sẽ là một cái gì đó như 'eval (" chức năng (a, b, ... args) {} ");', và kiểm tra lỗi cú pháp. Một lời nhắc nhở, tất nhiên, rằng "eval là ác", nhưng nếu bạn ghi nhớ để chỉ sử dụng nó cho một chuỗi nội tuyến chính xác nó có thể là một chút an toàn hơn. – Katana314
Rất nhiều tính năng ES6 không thể đơn giản được điền bởi vì nó là Cú pháp mới, vì vậy bạn sẽ cần phải có hai phiên bản của tất cả các mã của bạn; phiên bản ES6 và phiên bản Legacy (có thể được biên dịch từ phiên bản ES6 sử dụng Babel?). Tính năng phát hiện sẽ phải được thực hiện trong 'try..catch' vì nếu nó không được hỗ trợ, ** sẽ ** ném lỗi. Thay vào đó, bạn có thể mang mã lên đến ES5 với shims, điều đó có nghĩa là bạn có một cơ sở mã duy nhất. –