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

Например:

import Component from '@/components/component'

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

Ответ 1

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

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

Вместо

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

Вы можете

import xx from '@/utils/somefile'