Что означает символ"@", сделать импорта в JavaScript?

например: 

import Component from '@/components/component'

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

4 57
javascript

4 ответа:

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

у вас скорее всего есть что-то вроде babel-plugin-root-import в вашем Webpack / babel config.

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

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

74

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

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

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

43

сделать Benответ более полный:

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

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

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

вместо

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

Вы Можете

import xx from '@/utils/somefile'

12

как было сказано выше, эта функция не находится в 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-preffered/root/of-all-your/js/files", "rootPathPrefix": "@" }] ] }

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

import Myfile from "@/Myfile"

не делая все эти фанки вещи:

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

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

1