Início / coding / Perguntas / 79495242
Accepted
CalebK
Asked: 2025-03-09 08:40:02 +0800 CST

Os plugins VSCode sabem como resolver o caminho de importação absoluto, mas o compilador node typescript não

  • 772

Estou tentando seguir algumas das melhores práticas listadas aqui. Quero especificamente ter certeza de que tenho importações absolutas acontecendo. Sou relativamente novo em Node e Typescript e, portanto, espero mover arquivos com frequência conforme avanço.

Portanto, configurei meu tsconfig.jsonarquivo com o sugerido

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

Parece que o que ele está fazendo é muito básico. Apenas substituindo "@/*" por um arquivo de caminho de origem absoluto relativo ao nível superior. Dessa forma, a importação não muda com base em onde o arquivo que importa algo está.

De alguma forma, meu código VS parece entender isso. Não tenho certeza de como, mas há um sistema no vscode que funciona de tal forma que, se eu digitar errado uma importação, recebo um erro como este

Falha na importação

Mas se eu digitar corretamente não recebo erro Sucesso na importação

Tenho meus arquivos configurados assim Arquivos configurados assim

No entanto, quando eu executo npm start, é como se a coisa que está sendo executada no terminal estivesse executando uma coisa diferente daquela que está sendo executada no VSCode, porque a substituição parece não funcionar. Recebo um erro:

TS2307: Cannot find module '@/components/WebsiteTitles' or its corresponding type declarations.

Ou

ERROR in ./src/App.tsx 6:0-54
Module not found: Error: Can't resolve '@/components/WebsiteTitles' in '/Users/main/Coding/portfolio-website/src'

Meu host local é um Mac, se isso ajudar.

node.js

1 respostas

  1. Best Answer

    Com base na sua descrição, acho que você usou o CRA (Create React App) para configurar seu projeto.

    O CRA não fornece uma maneira fácil de substituir importações de caminho porque ele oculta a configuração do Webpack. No entanto, você ainda pode fazer isso usando o CRACO

    Recomendo verificar o site, instalá-lo e atualizar a seção de script em package.json.

    Em seguida, na raiz do seu projeto, crie um craco.config.jsarquivo e adicione a seguinte configuração para definir o alias:

    const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
    },
  },
};

    Depois de fazer isso, você deve conseguir usar o alias @ para importações no seu projeto React. No entanto, pessoalmente, recomendo usar o Vite para configurar seu projeto. Eles também o usam :)

    • 2

relate perguntas