Informazioni sull'attributo "tipo" in un tag <script>

Question

Sto cercando una spiegazione chiara dell'attributo type all'interno di un tag html <script>. Per la maggior parte della mia carriera come sviluppatore web, le mie istruzioni da internet sono state:

• Basta scrivere <script type='text/javascript'> e quindi inserire javascript al suo interno.
• In html5, è sufficiente scrivere <script> perché il valore predefinito è text/javascript.

E per molto tempo sono stato ingenuo e ho fatto solo quello che mi è stato detto. Ora sto imparando ReactJS, e c'è un nuovo set di istruzioni:

• includere lo script babel nella parte superiore del file
• Ora scrivere <script type="text/babel">
• Voila! Ora puoi scrivere qualcosa che somiglia molto a Javascript all'interno di quel tag, ma ha anche un sacco di fantastiche funzionalità extra.

Voglio capire la magia dietro l'aggiunta di type='text/babel' a un tag script. So che javascript è l'unica lingua che viene effettivamente eseguita in un browser, quindi qual è la relazione tra quell'attributo extra, lo script babel e il codice che scrivi all'interno. Questo tag in qualche modo trova lo script babel e fa qualcosa? Si tratta di una funzione browser/js fondamentale che consente il preprocessing del testo in un tag script prima di essere eseguito da javascript? Cos'altro dovrei sapere?

La demistificazione è l'obiettivo di questa domanda.

Answer 1

Voglio capire la magia dietro l'aggiunta di type = 'text/babel' a un tag di script.

Nessuna vera magia: lo script Babel incluso nella pagina cerca quegli elementi e li traspone in ES5 al volo, quindi il browser esegue il codice ES5 risultante. Impostazione che type sugli elementi di script fa due cose:

1. impedisce al browser di tentativo di eseguire direttamente, e

2. li identifica per lo script Babel.

Per quanto riguarda type su scriptin generale, da the specification:

L'attributo type dà il linguaggio dello script o il formato dei dati. Se l'attributo è presente, il suo valore deve essere un tipo MIME valido. Il parametro charset non deve essere specificato. L'impostazione predefinita, che viene utilizzata se l'attributo è assente, è "text/javascript".

Poi più tardi quando spiega come elaborare script elementi:

Se il programma utente non supporta il linguaggio di scripting data dal tipo del blocco di script per questo elemento script, quindi l'utente deve interrompere questi passi a questo punto. Lo script non viene eseguito.

---

Vale la pena chiamando cosa the Babel website says su transpiling nel browser:

Compilazione nel browser ha un caso d'uso abbastanza limitato, quindi se si sta lavorando su un sito di produzione si dovrebbe essere precompilare gli script sul lato server. Vedere setup build systems per ulteriori informazioni.

(dove hanno detto "compilazione" la maggior parte di noi direbbe "transpiling.")

Answer 2

Se il browser ha registrato il tipo MIME (come (storicamente) potrebbe essere il caso per VBScript o PerlScript), verrà eseguito dal browser tramite il parser/compiler/interprete appropriato ecc.

Altrimenti, è solo un elemento nel DOM con un nodo di testo al suo interno.

Altro codice, ad es. scritto in JavaScript, può trovare l'elemento DOM, leggere il contenuto di esso e quindi agire su di esso. Questo è ciò che fa Babel.

Answer 3

No, il browser non fa nulla per type=text/babel. I browser mainstream comprendono solo i tipi MIME supportati nell'attributo type e sempre predefiniti in ECMAScript (JavaScript). La maggior parte dei browser, ad oggi, non è ancora completamente compatibile con ES6.

Babel è un compilatore che compila qualsiasi codice ES6 incluso nello <script type="text/babel"> in un JavaScript ES5, una versione che i browser più moderni possono comprendere. Quando esegui il codice babel, il browser ignora semplicemente gli script babel. Babel è la libreria che lo cerca, trasforma il codice in ES5 e dice al browser di eseguirlo.