Wat doet het @-symbool bij het importeren van javascript?

Bijvoorbeeld:

import Component from '@/components/component'

In de code die ik bekijk, gedraagt ​​het zich als ../één niveau hoger in de map ten opzichte van het bestandspad, maar ik zou graag meer in het algemeen willen weten wat het doet. Helaas kan ik geen documentatie online vinden vanwege het probleem met het zoeken naar symbolen.

Antwoord 1, autoriteit 100%

De betekenis en structuur van de module-ID hangt af van de moduleladerof modulebundelaar. De modulelader maakt geen deel uit van de ECMAScript-specificatie. Vanuit een JavaScript-taalperspectief is de module-ID volledig ondoorzichtig. Het hangt er dus echt van af welke modulelader/bundler je gebruikt.

Je hebt waarschijnlijk iets als babel-plugin-root-importin uw webpack/babel-configuratie.

In feite betekent het vanuit de hoofdmap van het project.. het vermijdt dat je dingen als import Component from '../../../../components/component'

Bewerken:een reden waarom het bestaat, is omdat import Component from 'components/component'dat niet doet, maar in plaats daarvan zoekt in de node_modulesmap

Antwoord 2, autoriteit 54%

Weet dat het oud is, maar ik wist niet precies hoe het werd gedefinieerd, dus zocht het op, kwam langs, groef een beetje dieper en vond dit uiteindelijk in mijn Vue-CLI(Vue.js) gegenereerde Webpack-configuratie

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

het is dus een alias die in dit geval verwijst naar de hoofdmap van de door vue-cli gegenereerde src-map van het project

Antwoord 3, autoriteit 18%

Om Bens antwoorduitgebreider te maken:

Eerst moet u babel-plugin-root-importtoevoegen aan uw devDependenciesin package.json(bij gebruik van yarn: yarn add babel-plugin-root-import --dev).
Voeg vervolgens in uw .babelrcde volgende regels toe aan de plugins-sleutel:

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

Je kunt nu @gebruiken. Bijvoorbeeld:

In plaats van

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

Dat kan

import xx from '@/utils/somefile'

Antwoord 4, autoriteit 7%

Zoals hierboven vermeld, zit deze functie niet standaard in JS. Je moet een babel-plug-in gebruiken om ervan te genieten. En zijn taak is eenvoudig. Hiermee kunt u een standaard rootbron voor uw JS-bestanden specificeren en kunt u uw bestandsimport eraan toewijzen.
Om te beginnen met installeren via een van beide npm:

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

of

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

Maak een .babelrcin de hoofdmap van uw app en configureer deze instellingen naar uw smaak:

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

Met de bovenstaande configuratie kunt u eenvoudig uit die bron importeren zoals:

import Myfile from "@/Myfile" 

zonder al deze funky dingen te doen:

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

Houd er rekening mee dat je het symbool ook kunt veranderen in iets als "~"als dat je boot laat drijven.

Antwoord 5, autoriteit 3%

Ik gebruik VS-code om native apps te bouwen.

Wat je nodig hebt is:

1. maak een jsconfig.json onder het hoofdpad van uw app
   

2. voeg in uw jsconfig.json de volgende code toe:

   {
   “compilerOptions”: {
   “baseUrl”: “.”,
   “doel”: “ES6”,
   “module”: “commonjs”,
   “paden”: {
   “@/“:[“src/“],
   “@components/” : [“src/components/“],
   “@core/” : [“src/core/“]
   }
   },
   “uitsluiten”: [“node_modules”]
   }

in feite zoals “shortcut” : [“abs_path”]

Antwoord 6, autoriteit 2%

Als u Typescript gebruikt, kunt u dit eenvoudig bereiken door uw tsconfig.jsonals volgt te gebruiken:

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

Antwoord 7

// @ is an alias to /src

Geïnspireerd door het antwoord van Can Rau deed ik een soortgelijke ontdekking in mijn src/views/Home.vue-bestand. Dit bestand is gemaakt met de nieuwste (juli 2021, Ubuntu 20.04) versies: npx @vue/cli create myfirstvue --default.

Ik “afgeleid” dat het /srcwas, maar wilde weten waarom, omdat Ben’s aanvaard antwoordzei dat het de root zou zijn van mijn project, dat in feite de ouder is, van /src.

Hier is Home.vue:

...
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
</script>

Het wordt gedefinieerd door Vue Webpack-sjabloon, die ik heb geleerd van dit andere SO-antwoord.

Antwoord 8

Het is een manier om modulepaden opnieuw toe te wijzen, geen onderdeel van de ES zelf, je moet de babel-importfunctie gebruiken.