O que o símbolo @ faz nas importações de javascript?

141

Por exemplo: 

import Component from '@/components/component'

No código que estou vendo, ele se comporta como ../subir um nível no diretório em relação ao caminho do arquivo, mas eu gostaria de saber de maneira mais geral o que ele faz. Infelizmente, não consigo encontrar nenhuma documentação on-line devido ao problema de busca de símbolos.

javascript Laser
fonte
Possível duplicado de Uso de @ símbolo em nomes de módulo Node
Bergi

Respostas:

158

O significado e a estrutura do identificador do módulo depende do carregador ou do empacotador de módulos . O carregador de módulo não faz parte da especificação do ECMAScript. Da perspectiva da linguagem JavaScript, o identificador do módulo é completamente opaco. Portanto, depende realmente de qual carregador / bundler de módulo você está usando.

Você provavelmente tem algo como babel-plugin-root-import na sua configuração webpack / babel.

Basicamente, isso significa que, desde a raiz do projeto , evita-se escrever coisas comoimport Component from '../../../../components/component'

Editar: Uma razão pela qual existe é porque import Component from 'components/component'não faz isso, mas pesquisa na node_modulespasta

Ben
fonte
2
Obrigado @ felix-kling por melhorar minha resposta. É uma explicação muito melhor do que "não é uma coisa comum" :)
Ben
84

Sei que é antigo, mas eu não tinha muita certeza de como é definido, então procurei, vi um detalhe mais profundo e finalmente encontrei isso na minha configuração do Webpack gerada pelo Vue-CLI ( Vue.js )

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
    '@': path.join(__dirname, '..', dir)
    }
},

portanto, é um alias que, neste caso, aponta para a raiz do diretório src gerado pelo vue-cli do projeto

Can Rau
fonte
É possível usar algo assim? '@*': ['client/src/*']onde apenas a parte depois @ é tirada, para que eu possa fazer import X from '@components/xe ele tenta acessar corretamente client/src/components/x? O TS + VSCode já permite isso nesta forma exata no tsconfig.json, no entanto erros do webpack com Can't resolve '@components/x' in 'client/src/'. Quando eu a altero para a sua solução e os caminhos de importação import X from '@/components/x'começam imediatamente a funcionar, portanto, os caminhos estão corretos.
Qwerty
@Qwerty Não faço ideia, não sei o @ * coisa não sabia que existe no VSCode, por isso não posso ajudar
Can Rau
29

Para fazer a resposta de Ben mais abrangente:

Primeiro você precisa adicionar babel-plugin-root-importem sua devDependenciesna package.json(Se estiver usando yarn: yarn add babel-plugin-root-import --dev). Em seguida, .babelrcadicione as seguintes linhas na pluginschave:

"plugins": [
[
  "babel-plugin-root-import",
  {
    "rootPathPrefix": "@"
  }
]
]

Agora você pode usar @. Por exemplo:

Ao invés de

import xx from '../../utils/somefile'

Você pode

import xx from '@/utils/somefile'

Ali MasudianPour
fonte
Adicionei o plugin às minhas devdependências, mas não tenho .babelrc. Eu até criei na raiz, mas ainda não funciona? Eu apenas tenho babel.config.js
Kick Buttowski
8

Como dito acima, esse recurso não está em JS por padrão. Você precisa usar um plugin babel para se divertir. E seu trabalho é simples. Ele permite que você especifique uma origem raiz padrão para seus arquivos JS e ajuda a mapear suas importações de arquivos para ele. Para iniciar a instalação através do npm:

npm install babel-plugin-root-import --save-dev

ou

yarn add babel-plugin-root-import --dev

Crie um .babelrcna raiz do seu aplicativo e defina essas configurações ao seu gosto:

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathSuffix": "the-preferred/root/of-all-your/js/files",
      "rootPathPrefix": "@"
    }]
  ]
}

Com a configuração acima, você pode simplesmente importar dessa fonte como:

import Myfile from "@/Myfile"

sem fazer todas essas coisas divertidas:

"/../../../Myfile"

Observe que você também pode alterar o símbolo para algo como "~"isso flutua no seu barco.

Wale
fonte
0

Estou usando o código VS para criar aplicativos nativos de reação.

O que você precisa é:

  1. crie um jsconfig.json no caminho raiz do seu aplicativo insira a descrição da imagem aqui

  2. no seu jsconfig.json, adicione o seguinte código:

    {"compilerOptions": {"baseUrl": ".", "target": "ES6", "module": "commonjs", "caminhos": {"@ / ": ["src / "], "@components / ": [" src / components / "]," @ core / ": [" src / core / "]}}," excluir ": [" node_modules "]}

basicamente como "atalho": ["abs_path"]

Daniel Hua
fonte