Hiểu thuộc tính "loại" trong thẻ <script>

Question

Tôi đang tìm kiếm giải thích rõ ràng về thuộc tính type bên trong thẻ html <script>. Đối với hầu hết sự nghiệp của tôi với tư cách là nhà phát triển web, hướng dẫn của tôi từ internet là:

• Chỉ cần viết <script type='text/javascript'> rồi đặt javascript vào bên trong.
• Trong html5, chỉ cần viết <script> vì text/javascript là mặc định.

Và trong thời gian dài nhất, tôi đã ngây thơ và chỉ làm những gì tôi được bảo. Bây giờ tôi đang ReactJS học tập, và có một bộ mới của hướng dẫn:

• Bao gồm các kịch bản babel ở phía trên cùng của tập tin của bạn
• Bây giờ viết <script type="text/babel">
• Voila! Bây giờ bạn có thể viết một cái gì đó trông rất giống như Javascript bên trong thẻ đó, nhưng nó có một loạt các tính năng bổ sung mát mẻ ngoài ra.

Tôi muốn hiểu sự kỳ diệu sau khi thêm type='text/babel' vào thẻ script. Tôi biết rằng javascript là ngôn ngữ duy nhất thực sự chạy trong trình duyệt, vậy mối quan hệ giữa thuộc tính bổ sung đó là gì, tập lệnh babel và mã bạn viết bên trong. Thẻ đó có bằng cách nào đó tìm thấy tập lệnh babel và làm gì đó không? Đây có phải là tính năng trình duyệt/tính năng cơ bản cho phép xử lý trước văn bản trong thẻ tập lệnh trước khi được thực thi bởi javascript không? Tôi nên biết điều gì khác?

Làm sáng tỏ là mục tiêu của câu hỏi này.

Answer 1

Tôi muốn hiểu phép thuật đằng sau việc thêm loại = 'text/babel' vào thẻ tập lệnh.

Không có ma thuật thực: Kịch bản Babel bạn đưa vào trang tìm kiếm các phần tử đó và chuyển chúng vào ES5 ngay sau đó, sau đó trình duyệt chạy mã ES5 kết quả. Thiết rằng type trên các yếu tố kịch bản hiện hai điều:

1. Ngăn chặn trình duyệt từ cố gắng để chạy chúng trực tiếp, và

2. Xác định chúng cho kịch bản Babel.

Về type trên scriptnói chung, từ the specification:

Các type thuộc tính cho ngôn ngữ của kịch bản hoặc định dạng của dữ liệu. Nếu thuộc tính có mặt, giá trị của thuộc tính phải là loại MIME hợp lệ. Tham số charset không được chỉ định. Giá trị mặc định, được sử dụng nếu thuộc tính vắng mặt, là "text/javascript".

Sau đó, sau khi giải thích làm thế nào để xử lý script yếu tố:

Nếu user agent không hỗ trợ các ngôn ngữ kịch bản được đưa ra bởi loại khối kịch bản cho yếu tố script này, sau đó các đại lý sử dụng phải hủy bỏ những bước vào thời điểm này. Tập lệnh không được thực hiện.

---

Nó có giá trị gọi ra những gì the Babel website says về transpiling trong trình duyệt:

Biên soạn trong trình duyệt có một trường hợp sử dụng khá hạn chế, vì vậy nếu bạn đang làm việc trên một trang web sản xuất bạn nên có biên dịch trước kịch bản lệnh phía máy chủ của bạn. Xem setup build systems để biết thêm thông tin.

(Trong trường hợp họ đã nói "biên soạn" hầu hết chúng ta sẽ nói "transpiling.")

Answer 2

Nếu trình duyệt có loại MIME được đăng ký (như (trong lịch sử) có thể là trường hợp cho VBScript hoặc PerlScript) thì trình duyệt sẽ chạy, thông qua trình phân tích cú pháp/trình biên dịch/phiên dịch/etc thích hợp.

Nếu không, nó chỉ là một phần tử trong DOM với một nút văn bản bên trong nó.

Mã khác, ví dụ: được viết bằng JavaScript, có thể tìm thấy phần tử DOM, đọc nội dung của nó, và sau đó hành động trên nó. Đây là những gì Babel làm.

Answer 3

Không, trình duyệt không làm bất cứ điều gì để type=text/babel. Các trình duyệt chính chỉ hiểu các loại MIME được hỗ trợ trong thuộc tính type và luôn luôn mặc định là ECMAScript (JavaScript). Hầu hết các trình duyệt, tính đến hôm nay, vẫn chưa hoàn toàn tương thích với ES6. Babel là một trình biên dịch biên dịch bất kỳ mã ES6 nào được đính kèm trong các <script type="text/babel"> vào một JavaScript ES5, một phiên bản mà hầu hết các trình duyệt hiện đại đều có thể hiểu được. Khi bạn chạy mã babel, trình duyệt chỉ đơn giản là bỏ qua các tập lệnh babel. Babel là thư viện tìm kiếm nó, chuyển mã thành ES5 và yêu cầu trình duyệt chạy nó.