Что символ @ делает в импорте JavaScript?

141

Например:

import Component from '@/components/component'

В коде, который я смотрю, он ведет себя как ../переход на один уровень вверх по каталогу относительно пути к файлу, но я хотел бы знать в более общем смысле, что он делает. К сожалению, я не могу найти какую-либо документацию онлайн из-за проблемы с поиском символов.

javascript лазер
источник

Возможный дубликат Использование символа @ в именах модулей Node

Берги

158

Значение и структура идентификатора модуля зависит от загрузчика модуля или модуля связывания . Загрузчик модулей не является частью спецификации ECMAScript. С точки зрения языка JavaScript, идентификатор модуля полностью непрозрачен. Так что это действительно зависит от того, какой загрузчик / упаковщик модулей вы используете.

Скорее всего, у вас есть что-то вроде babel-plugin-root-import в вашей конфигурации webpack / babel.

В основном это означает, что из корня проекта .. он избегает необходимости писать такие вещи, какimport Component from '../../../../components/component'

Редактировать: одна из причин, по которой он существует, заключается в том, что import Component from 'components/component'не делает этого, а вместо этого искать в node_modulesпапке

Бен
источник

2

Спасибо @ felix-kling за улучшение моего ответа. Это гораздо лучшее объяснение, чем «не стандартная вещь» :)

Бен

84

Я знаю, что он старый, но я не совсем уверен, как он определен, поэтому посмотрел его, зашел, покопался немного глубже и, наконец, нашел это в моем сгенерированном конфиге Webpack для Vue-CLI ( Vue.js )

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

так что это псевдоним, который в этом случае указывает на корень сгенерированной vue-cli директории src проекта

Кан Рау
источник

Можно ли использовать что-то подобное? '@*': ['client/src/*']где только часть после @ взята, так что я могу сделать, import X from '@components/xи он правильно пытается получить доступ client/src/components/x? TS + VSCode уже позволяет это в такой точной форме в tsconfig.json, однако ошибки веб-пакета с Can't resolve '@components/x' in 'client/src/'. Когда я изменяю его на ваше решение, и пути импорта к import X from '@/components/x'нему сразу же начинают работать, поэтому в остальном пути правильные.

Qwerty

@Qwerty Не знаю, не знаю, что @ * не знал, что он существует в VSCode, поэтому не могу помочь

Can Rau

29

Чтобы сделать ответ Бена более полным:

Сначала вы должны добавить babel-plugin-root-importсвой devDependenciesвход package.json(если используете yarn:) yarn add babel-plugin-root-import --dev. Затем .babelrcдобавьте в pluginsключ следующие строки :

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

Теперь вы можете использовать @. Например:

Вместо того

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

Ты можешь

import xx from '@/utils/somefile'

Али МасудианПур
источник

Я добавил плагин в мои зависимости, но у меня нет .babelrc. Я даже создал его в корне, но все равно не работает? У меня просто есть babel.config.js

Kick Buttowski

8

Как сказано выше, эта функция по умолчанию отсутствует в JS. Вы должны использовать плагин Babel, чтобы наслаждаться им. И его работа проста. Он позволяет вам указать корневой источник по умолчанию для ваших файлов JS и помогает сопоставить импорт файлов с ним. Чтобы начать установку через npm:

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

или

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

Создайте .babelrcв корне своего приложения и настройте эти параметры на свой вкус:

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

С конфигурацией выше, вы можете просто импортировать из этого источника, как:

import Myfile from "@/Myfile"

без всяких прикольных вещей:

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

Обратите внимание, что вы также можете изменить символ на что-то вроде, "~"если это плавает на вашей лодке.

рубчик
источник

0

Я использую код VS для создания реагировать нативных приложений.

Что вам нужно это:

создайте jsconfig.json под корневым путем вашего приложения
в вашем jsconfig.json добавьте следующий код:

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

в основном как "ярлык": ["abs_path"]

Даниэль Хуа
источник

Что символ @ делает в импорте JavaScript?

Ответы: