Sendo conciso pode dizer-se que há 3 gerações diferentes no que respeita a importar bibliotecas.
- incluíndo a biblioteca no espaço global (a mais antiga e mais comum)
- usando gestores de pacotes/bibliotecas/dependências (para quem sabe e precisa)
- usando
import
(o futuro, ES6 e ES7)
A maneira mais comum ainda hoje é importar para o espaço global, inserindo o ficheiro diretamente na página. Exemplos disso são o jQuery
, Angular
, Mootools
, etc quando carregado no HTML com por exemplo:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Dessa maneira as variáveis que forem globais nesse ficheiro serão globais na minha aplicação.
Isso é simples, mas pode causar problemas quando estamos a importar código que exporta muitas variáveis/nomes para o espaço global. Se pensar-mos que cada aplicação pode ter 20 ficheiros .js
a serem carregados então é fácil perceber que a probablidade de sobreposição de nomes e variáveis que apagam outras é grande. Isto funciona bem em projetos pequenos e onde o autor tem controlo/conhecimento de que ficheiros inclui na aplicação.
Mais tarde surgiram gerenciadores como o require.js
e o browserify (que converte módulos no Node.js para o browser).
A ideia é simples, estes programs carregam as bibliotecas necessárias e as suas dependências e depois expõe variáveis escolhidas dessas bibliotecas a um escopo defenido/limitado. Ou seja, o código que temos nunca é corrido no espaço global, mas sim dentro de funções para limitar o escopo e só com acesso às variáveis que o gerneciador de módulos tiver configuradas. Basicamente, exemplo minimalista:
requirejs(['jquery'], function( $ ) {
// aqui dentro o $ do jQuery está disponivel.
// o código da aplicação coloca-se a partir daqui
});
Paralelo a esta realidade mais ou menos habitual no browser surgiu o Node.js, que é JavaScript no lado do servidor. Aí foi adotado o modelo CJS. Que basicamente faz com que cada ficheiro nunca exporta para o espaço global, e tudo o que entra no ficheiro (módulo) tem de entrar via require
.
var $ = require('jquery');
exports.myExample = function () {};
Isto seria o exepmlo equivalente, se bem que o jQuery não se usa no Node.js. Mas segúindo a comparação vê-mos que dentro desse ficheiro o $
está disponivel depois de requerido o módulo e atribuído à variável. O exports
é a prta de passagem para o mundo exterior e é o que vai ser passado à proxima variável que fizer var x = require(etc...);
O futuro é usar [import
]3 que faz parte das especificações ES6 e ES7 mas que ainda não está disponivel nos browsers. Estes módulos (em tempos chamados de Harmony) são inspirados no modelo do Node.js (CJS). Apesar de isto pertencer ao futuro, é contudo possivel hoje escrever JavaScript com esta sintaxe e depois converter para o browser com Babelify (Babel + Browserify), que são simuladores (bem fiáveis e muito usados). Assim escre-ve-se código que não precisa ser mudado no futuro.
Esta nova maneira de carregar dependências é muito útil e esperada. Neste caso futuro a sintaxe é:
// para importar todas as variáveis globais nesse "meu-modulo"
// e colocar numa nova variável chamada "meuModulo":
import * as meuModulo from "meu-modulo";
// para importar somente a variável meuModulo desse "meu-modulo"
import {meuModulo} from "meu-modulo";
// para importar e dar novo nome ao mesmo tempo (multiplos nomes/variáveis neste exemplo)
import {meuModulo as m, calculadora as c} from "meu-modulo";
Uma diferença importante entre este modelo e CJS é que na ES6/7 é possivel usar o export multiplas vezes para disponibilizar essas funcionalidades a "quem importar" esse ficheiro.
Um exemplo:
ficheiro main.js
import {closest, getElements} from 'utils';
// ou até import * as utils from 'utils'
getElements('div').forEach(el => {
el.innerHTML = 'foo';
});
ficheiro utils.js
export function getElements(what, rel) {
if (typeof what != 'string' && typeof what != 'undefined') return what.tagName ? [what] : what;
var els = (rel || document).querySelectorAll(what);
return [].slice.call(els);
}
export function getClosest(el, selector) {
while (el && !el.matches(selector)) {
el = el.parentElement;
}
return el;
}
+1
esta pergunta é muito importante para o JavaScript. Porque o modelo "nativo" tem dado muitas dores de cabeça, porque houve uma guerra grande entre AMD e CJS no passado e porque o futuro está aí com ES6 harmony. Dei uma resposta +/- sucinta. Espero que ajude a perceber os conceitos pelo menos.