🇧🇷 | Import paths personalizados e como isso pode te ajudar

deixando os seus 수입품은 더 우아하고 조직적입니다 - Parte 01

Se existe uma dor que me incomoda quando estou desenvolvendo uma aplicação com muitos arquivos, é quando esses arquivos importam outros arquivos, e isso provoca um extraso de ../ nos imports desses arquivos.

É comum vermos que a medida que a nossa aplicação vai crescendo, as pastas dos arquivos do nosso projeto vão se aninhando cada vez mais dentro de outras 파스타, e quando menos esperamos nos deparamos com o seguinte exemplo de import:

import ExampleComponent from '../../../../../../src/components/ExampleComponent/'

예를 들어 acima é real e é muito mais comum do que imaginamos. Infelizmente o uso extraivo desses ../ traz algumas dores no momento em que precisamos dar manutenção ao nosso código, dentre elas, o retrabalho de consertar o caminho relativo toda vez que precisamos alterar o local de um arquivo importado ou do arquivo importador.

Uma das formas mais simples de deixarmos esse import mais elegante e organizado é criando um path personalizado e deixando-o como absoluto. Dessa forma, o acima poderia ficar assim의 예:

import ExampleComponent from '~/components/ExampleComponent/'

No example acima, o prefixo ~ foi configurado como um caminho absoluto de um diretório do nosso projeto, nesse caso o diretório é a 파스타 src . Dessa forma, não importa em qual 파스타 o nosso arquivo esteja, quando utilizarmos o prefixo~/ , semper estaremos importando o path absoluto da 파스타src .

Bem louco né?!

Fazendo acontecer

필요에 따라 설치

Antes de tudo, precisaremos instalar e configurar três dependsências para que essa mágica funcione. E elas são:

react-app-rewired 및 customize-cra

아니오 프로젝트, vamos executar 또는 vamos abaixo para personalizarmos as configurações do webpack sem a necessidade de utilizar o eject e sem a needsidade de criar um fork do react-scripts.

yarn add -D react-app-rewired customize-cra

바벨-플러그인-루트-가져오기

Agora vamos executar o comando abaixo para importarmos arquivos usando paths personalizados.

yarn add -D babel-plugin-root-import

Criando 또는 'config-overrides.js'

Também na raiz do nosso projeto, criaremos um arquivo chamadoconfig-overrides.js . Ele será o responsável por estabelecer a 파스타 raiz do nosso projeto.

Vamos inserir esse código no arquivo:

const { addBabelPlugin, override } = require('customize-cra')

module.exports = override(
  addBabelPlugin([
    'babel-plugin-root-import',
    {
      rootPathSuffix: 'src',
    },
  ])
)

vida do dev 편집자 촉진

Ainda na raiz do nosso projeto, criaremos um arquivo chamadojsconfig.json . Ele será o responsável por fazer com que o VSCODE entenda os paths personalizados.

Vamos inserir esse código no arquivo:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "~/*": ["*"]
    }
  }
}

최신 정보

Por último, atualizaremos os scripts no arquivo package.json . Deixe-os dessa 형식:

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

이 파일은 스크립트 제거를 제외하고 스크립트react-scripts 또는 react-app-rewired를 대체할 수 있습니다.

급히!

Agora podemos utilizar qualquer arquivo dentro da nossa 파스타src utilizando o~/ no momento do import.

import ExampleComponent from '~/components/ExampleComponent/'

이자형...

Se quiser ver esse exemplo na prática, você pode dar uma olhadinha no template que eu criei para projetos React aqui:

디에고실바테크 / 상용구-cra-typescript

이 프로젝트는 React 프로젝트의 상용구입니다. 이 템플릿은 ReactJS 및 TypeScript로 제작되었습니다.

Lá eu também configurei o ESLint e outras coisas para facilitar a estrutura inicial do seu projeto.


Comenta aí o que você acha dessa abordagem nos nossos 수입품 :)