Understanding the "type" attribute in a <script> tag

Question

I'm seeking a clear explanation of the type attribute inside an html <script> tag. For most my career as a web developer, my instructions from the internet were:

• Just write <script type='text/javascript'> and then put javascript inside of it.
• In html5, just write <script> because the text/javascript is the default.

And for the longest time I was naive and just did what I was told. Now I'm learning ReactJS, and there's a new set of instructions:

• Include the babel script at the top of your file
• Now write <script type="text/babel">
• Voila! Now you can write something that looks a lot like Javascript inside that tag, but it has a bunch of cool extra features in addition.

I want to understand the magic behind adding type='text/babel' to a script tag. I know that javascript is the only language that actually runs in a browser, so what is the relationship between that extra attribute, the babel script and the code you write inside. Does that tag somehow find the babel script and do something to it? Is this a fundamental browser/js feature that allows preprocessing text in a script tag before being executed by javascript? What else should I know?

Demystification is the goal of this question.

Answer 1

Simple:

Browser engine just understand type="type/javascript" then run JS code.

You can add your custom type like type="type/f*ckjs" but browser skip script element ! :)

When add transformer library to HTML file like bablejs, babeljs decide read any <script> tags with define explicit type like type/babel or type/jsx and read src file and transform code to JS executable.

Answer 2

I want to understand the magic behind adding type='text/babel' to a script tag.

No real magic: The Babel script you include on the page looks for those elements and transpiles them into ES5 on-the-fly, then has the browser run the resulting ES5 code. Setting that type on the script elements does two things:

1. Prevents the browser from trying to run them directly, and

2. Identifies them for the Babel script.

Regarding type on script in general, from the specification:

The type attribute gives the language of the script or format of the data. If the attribute is present, its value must be a valid MIME type. The charset parameter must not be specified. The default, which is used if the attribute is absent, is "text/javascript".

Then later when explaining how to process script elements:

If the user agent does not support the scripting language given by the script block's type for this script element, then the user agent must abort these steps at this point. The script is not executed.

---

It's worth calling out what the Babel website says about transpiling in the browser:

Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side. See setup build systems for more information.

(Where they've said "compiling" most of us would say "transpiling.")

Answer 3

No, the browser does not do anything to type=text/babel. Mainstream browsers only understand supported MIME types in the type attribute, and always default to ECMAScript (JavaScript). Most browsers, as of today, are still not fully ES6-compatible.

Babel is a compiler that compiles any ES6 code enclosed within the <script type="text/babel"> into a ES5 JavaScript, a version that most modern browsers can understand. When you run babel code, the browser simply ignores the babel scripts. Babel is the library that looks for it, transform code into ES5 and tells the browser to run it.

Answer 4

If the browser has the MIME type registered (as (historically) might be the case for VBScript or PerlScript) then it will be run, by the browser, through the appropriate parser/compiler/interpreter/etc.

Otherwise, it is just an element in the DOM with a text node inside it.

Other code, e.g. written in JavaScript, can find the DOM element, read the content of it, and then act on it. This is what Babel does.