5

É possível incluir um arquivo JavaScript dentro de outro arquivo JavaScript?

Semelhante ao @import em CSS ou ao include do PHP?

5 Respostas 5

9

Você só poderá incluir um script em uma página HTML. sabendo disto você possui algumas soluções para "simular" a inclusão pelo javascript, como seria isso?

No meu arquivo index.html possuo meu arquivo scripts.js, nele eu gostaria de carregar outras duas. clientes.js e produtos.js então eu faço assim:

Com javascript:

var imported = document.createElement('script');
imported.src = 'cliente.js';
document.head.appendChild(imported); 

Com jQuery:

$.getScript("produtos.js", function(){
   alert("Script loaded but not necessarily executed.");
});

Existem outras maneiras mas elas são apenas formas diferentes de incluir o javascript no html seja de forma assíncrona ou não.

Include a JavaScript file in another JavaScript file?

2
  • 2
    Porém adicionando o script ao HTML não vai incluir o script dentro do outro script – o script adicionado vai ser executado em um escopo global.
    – user37626
    Commented 5/07/2016 às 17:22
  • 3
    @KlaiderKlai exatamente, por isto é importante ter um cuidado a mais na hora de realizar esta inclusão, e outra, sempre ter o cuidado de evitar conflito encapsulando os métodos e variáveis. Commented 5/07/2016 às 17:27
2

Possível é, porém esta não é uma funcionalidade nativa.

Não existem diretivas @import, #include, include() ou algo parecido para Javascript.

O que é possível fazer (eu considero gambiarra) é criar um elemento através de código Javascript e atribuir ao conteúdo deste elemento o conteúdo de um outro arquivo.

Não recomendo.

1

Allan, como o Bruno já mencionou, atualmente não existe uma implementação nativa que faça o include de outros arquivos JS. porém você pode definir os seus scripts como módulos e usar uma biblioteca AMD para gerenciar os seus scripts.

Eu diria que usar AMD no seu projeto pode ser especialmente vantajoso se estiver desenvolvendo uma aplicação SPA, mas nada impede que utilize esta abordagem em uma aplicação multi-page.

Alguns exemplos de Blibiotecas AMD são:

Segue um pequeno exemplo retirado do Github do RequireJS

HTML

<html>
    <head>
        <script data-main="app" src="lib/require.js"></script>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

Note que no exemplo, ele apenas adicionou o require.js e informou o arquivo *.js que possui a configuração do AMD, no caso o app.js

app.js

requirejs.config({
    baseUrl: 'lib',
    paths: {
        app: '../app'
    }
});
requirejs(['app/main']);

aqui ele definiu o caminho para os scripts, no caso a pasta lib e um path para a pasta app, e começou a execução do arquivo app/main.js

app/main.js

define(function (require) {
    var messages = require('./messages');
    var print = require('print');

    print(messages.getHello());
});

aqui ele informou que o script possui duas dependerias, app/messages.js e lib/print.js, neste caso ele vai esperar que os dois scripts sejam executados para poder continuar.

lib/print.js

define(function () {
    return function print(msg) {
        console.log(msg);
    };
});

aqui não tem muito segredo, temos apenas uma função sem dependências.

app/messages.js

define(function () {
    return {
        getHello: function () {
            return 'Hello World';
        }
    };
});

mesma coisa aqui, porém é retornado um objeto.

0

Não enquanto não implementam um método ou statement. Está "ok" que é possível, em JavaScript:

  • 1 . criar um elemento script;
  • 2 . atribuir o src do script;
  • 3 . adicionar o script para o HTML;

Assim o conteúdo de um arquivo externo é requisicionado, então depois é interpretado e executado pelo navegador, porém é executado em um escopo global, ou seja, o JavaScript não vai estar incluído dentro do outro JavaScript. É uma solução, mas não como você quer.

3
  • Eu não diria que "nunca será possível", mas sim que é "muito improvável". Se a questão é porque a linguagem trabalha com um interpretador e precisaria de um processo de compilação e análise para isso, bem, o próprio ES6 possui modules que trabalham com análise estática (algo parecido com o que seria necessário para fazer um #include no JS). Então caso o time que cuida da especificação do ECMAScript queira colocar isso, é possível com os recursos atuais, mas como eu disse, acho muito improvável (e nada útil, nunca precisei usar) Commented 5/07/2016 às 16:49
  • @GabrielKatakura Eu concordo um pouco, mas se forem adicionar esse tal de #include não vai funcionar muito bem porque o arquivo declarado tem que carregar e não vai executar no mesmo escopo. No CSS até faz mais sentido o @include, mesmo tendo que carregar, pois na linguagem não há escopos.
    – user37626
    Commented 5/07/2016 às 17:08
  • Não exatamente, isso depende de como eles implementariam, nada impede de eles implementarem de uma maneira que o escopo seja resolvido (ou não). Estamos falando de uma feature não implementada, não podemos supor tais limitações se ao olharmos no ponto de vista do compilador/interpretador isso pode ser possível... mas seria trabalhoso demais e como eu disse, acho desnecessário. Commented 5/07/2016 às 17:11
-1

É perfeitamente possivel, crie um arquivo 'list.js' e faça dessa forma:

import('assets/exemple.min.js')
import('assets/exemple2.min.js')
import('assets/exemple3.min.js')
import('assets/exemple4.min.js')
.then(module => {
        module.loadPageInto(main);
      });

Seus arquivos carregaram normalmente como em uma tag <script>, você pode encontrar outras informações na documentação, acesse: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import

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 .