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

Например:

import Component from '@/components/component'

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

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

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

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

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

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

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

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

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

Сначала вы должны добавить 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'

Как сказано выше, эта функция по умолчанию отсутствует в 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"

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

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

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

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

2. в вашем jsconfig.json добавьте следующий код:

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

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