5

Recentemente vi um código que, ao incluir um arquivo JavaScript era setado o atributo type com o valor module como no exemplo abaixo:

<script type="module" src="arquivo.js"></script>

Gostaria de saber para que serve esse valor, consequentemente, essa pergunta traz outra dentro de si mesmo:

  • Compatibilidade do navegador

2 Respostas 2

6

O module é novo recurso no ECMAScript 6ª edição (ES6). Quando você seta o atributo type="module" a um arquivo .js, você o converte em um módulo.

Um módulo é um arquivo JS normal, mas com algumas peculiaridades:

  • O código de um módulo automaticamente ganha "use strict";, mesmo que você não defina isso nele;
  • Você pode usar os métodos import e export nos módulos para intercambiar objetos como function, class, var, let, ou const.

Tudo o que é declarado dentro de um módulo, por padrão, é local para o módulo. Se você deseja que algo declarado em um módulo seja público, para que outros módulos possam usá-lo, você deve exportar esse recurso (export), e para outro módulo usá-lo, deverá importá-lo (import).

Quanto à compatibilidade, o MDN mostra a seguinte tabela:

inserir a descrição da imagem aqui

Na mesma página é informado:

This feature is only just beginning to be implemented in browsers natively at this time. It is implemented in many transpilers, such as TypeScript and Babel, and bundlers such as Rollup, Webpack and Parcel.

Tradução livre:

Este recurso está apenas começando a ser implementado de forma nativa nos navegadores neste momento. Está implementado em vários transpiladores, como TypeScript e Babel, e agrupadores como Rollup, Webpack e Parcel.

4

Os módulos JavaScript permitem que um programa seja dividido em múltiplas sequências de declarações. Cada módulo identifica explicitamente as declarações que ele usa e que precisam ser fornecidas por outros módulos e quais das suas declarações estão disponíveis para uso por outros módulos.

Em navegadores compatíveis com HTML5 o código é tratado como um módulo de JavaScript. O processamento do conteúdo do script não é afetado pelo charset e defer atributos. Para obter informações sobre o uso do módulo veja aqui: https://hacks.mozilla.org/2015/08/es6-in-depth-modules/

Documentação do Chrome sobre o assunto: https://www.chromestatus.com/feature/5365692190687232

Documentação da Mozilla sobre o assunto: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/script

Demo: https://paulirish.github.io/es-modules-todomvc/

Sobre a compatibilidade do navegador veja como está o Standards: https://html.spec.whatwg.org/multipage/scripting.html#the-script-element (última atualização em 7 de Março de 2018)

inserir a descrição da imagem aqui

https://caniuse.com/#feat=es6-module

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .