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

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.

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

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

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'

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.

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

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"]