1

Preciso importar dinamicamente os caminhos para os assets de uma aplicação, por exemplo:

var cliente = clienteX

import ../../caminho/${cliente}/caminho/arquivo.less

Não será mudado em tempo de execução, ele apenas puxaria de um arquivo de configuração, qual cliente ele puxará os assets, tendo em vista que o Core do sistema é o mesmo.

Pelo que pesquisei o import é estático, então queria alguma ajuda ou ideia de algum workaround para essa situação.

Edit 1: Exemplo de estrutura

  • Sistema

  • Clientes

  • cliente 1

    • css
      • main.css
  • cliente 2

    • css
      • main.css

Exemplo de imports:

require ('../../Clientes/'+ cliente + '/css/main.css');

import ../../Clientes/${cliente}/css/main.css;

6
  • 1
    Já tentou usar o require? Se você está usando o babel, ele tem suporte para o require no browser. Exemplo: github.com/pedrolaxe/js-terminal/blob/master/src/js/terminal/… 28/03/2017 às 13:47
  • @GabrielKatakura Já tentei também e não rolou muito bem :/
    – user70256
    28/03/2017 às 13:53
  • Podes tentar usar o path.resolve combinado com o __dirname, dá um exemplo da estrutura de diretórios para ficar mais claro
    – Sergio
    28/03/2017 às 13:57
  • @Sergio atualizei ali na pergunta
    – user70256
    28/03/2017 às 14:02
  • Os exemplos que colocaste foi o que tentaste e não funcionou?
    – Sergio
    28/03/2017 às 14:06

2 Respostas 2

1

Você não consegue criar imports dinâmicos. Como você comentou, o import do javascript é estático, logo não aceita interpolação de strings.

O que você consegue fazer é usar o require.

require ('../../Clientes/'+ cliente + '/css/main.css');

ou

require (`../../Clientes/${cliente}/css/main.css`);

Devem funcionar. Caso não funcionem o seu erro deve ser outro. Consegue verificar se o path está correto? Se fizer o mesmo require estático com o caminho de um dos clientes ele funciona?

Exemplo:

require (`../../Clientes/cliente1/css/main.css`);

Nesse caso, consegue verificar se o valor da variável cliente está correto?

Caso não consiga importar estaticamente, verifique a configuração do seu compilador (Babel) para checar se não existe algum erro no loader.

Caso continue errado, consegue postar o log do erro no terminal?

5
  • Tentei com o require, mas igual não funcionou. Ele não retorna erro, simplesmente não importa. Fiz o require passando o caminho de um dos clientes e funciona. ai passei o nome do cliente pra uma variável e passei ela e ele não importou :/
    – user70256
    28/03/2017 às 14:30
  • Você consegue confirmar se ele realmente não está importando? Coloque um body { background: #000 !important; } no estilo importado só para validar que ele realmente não está sendo importado. Fez o teste importando sem a variável com o cliente1 no lugar? Caso continue dando erro, você consegue importar qualquer outro arquivo css no projeto? Para validar que não é um problema com o loader. 28/03/2017 às 14:32
  • Sim, eu importando passando o nome do cliente direto ele importa e altera o css, se eu passar ele como variável ele não importa mesmo.
    – user70256
    28/03/2017 às 14:34
  • Consegue dar um console.log na variável? Para verificar que o valor dela é o esperado? 28/03/2017 às 14:37
  • retorna a string do cliente mesmo hahaha. Parece que somente o fato de ter algo "variável" no caminho, faz com que ele não seja importado
    – user70256
    28/03/2017 às 14:38
1

Você consegue fazer imports dinâmicos sim, porém, até onde eu sei, apenas consegue fazer com arquivos '.js'. Vamos lá, suponha que você tem um arquivo muito grande e, dependendo do clique do usuário, deve fazer algo que é exportado por esse arquivo. Se você importar ele durante a requisição da página, pode ser que seu carregamento fique lento e não tenha o comportamento desejado, para isso existem imports dinâmicos. A idéia é que você importa o arquivo, e de dentro dele usa as funções de são exportadas.

Use assim:

const file = await import('./caminho')
const something = file.exportedFunction()

https://javascript.info/modules-dynamic-imports

1
  • 2
    Por favor, adicione mais detalhes para expandir sua resposta, como um código que funcione ou citações de documentação.
    – Comunidade Bot
    4/09/2021 às 3:42

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 .