Essa é uma restrição especial adicionada pelos desenvolvedores do create-react-app. Ele é implementado ModuleScopePlugin
para garantir que os arquivos residam src/
. Esse plug-in garante que as importações relativas do diretório de origem do aplicativo não cheguem fora dele.
Você pode desativar esse recurso, mas somente após a eject
operação do projeto create-react-app.
A maioria dos recursos e suas atualizações estão ocultos nas partes internas do sistema create-react-app. Se você criar eject
, não terá mais alguns recursos e sua atualização. Portanto, se você não estiver pronto para gerenciar e configurar o aplicativo incluído para configurar o webpack e assim por diante - não faça a eject
operação.
Jogue de acordo com as regras existentes (vá para src). Mas agora você pode saber como remover restrições: faça eject
e remova ModuleScopePlugin
do arquivo de configuração do webpack .
Desde create- react -app v0.4.0, a NODE_PATH
variável de ambiente permite especificar um caminho para importação absoluta. E desde que a v3.0.0 NODE_PATH
foi descontinuada em favor da configuração baseUrl
em jsconfig.json
ou tsconfig.json
.
A importação absoluta permite o uso import App from 'App'
em import App from './App'
relação ao valor especificado no URL base.
Esse recurso é especificamente útil para monorepos ou outras questões de configuração, mas não para importar imagens ou qualquer outra coisa da public
pasta.
O conteúdo da public
pasta será colocado na build
pasta e disponível por URL relativo. Além disso, tudo o que for importado será processado pelo webpack e também será colocado na build
pasta.
Se você importar algo da public
pasta, provavelmente esse item será duplicado na build
pasta e estará disponível por dois URLs diferentes (ou com formas diferentes de carregar), o que piorará o tamanho do download do pacote.
A importação da pasta src é preferível e possui vantagens. Tudo será empacotado pelo webpack no pacote com tamanho ideal para os pedaços e para a melhor eficiência de carregamento .
Existem soluções intermediárias, a saber, o sistema de religação , que permite modificar programaticamente a configuração do webpack. Mas remover o ModuleScopePlugin
plugin não é uma boa solução; é melhor adicionar diretórios adicionais totalmente funcionais semelhantes a src
.
Atualmente, create-react-app
não suporta diretórios adicionais além src
da pasta raiz. Isso pode ser feito usando react-app-rewire-alias
../public/images/logo_2016.png
Subiu duas vezes, primeiro na pasta de componentes e depois na pasta src.