Например:

import Component from '@/components/component'

In the code I'm looking at it behaves like ../ going up one level in the directory relative to the file path, but I'd like to know more generally what it does. Unfortunately I can't find any documentation online due to the symbol searching problem.

Laser

Ответов: 8

Ответы (8)

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

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

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

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

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

Вам понадобится:

  1. создать jsconfig.json в корневом каталоге вашего приложения enter image description here

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

    { "compilerOptions": { "baseUrl": ".", "target": "ES6", "модуль": "commonjs", "paths": { "@ /": ["src /"], "@ components /": ["src / components /"], "@ core /": ["src / core /"] } }, "exclude": ["node_modules"] }

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

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

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

Чтобы сделать ответ Бена более исчерпывающим:

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

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

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

Вместо

импортировать xx из '../../utils/somefile'

Можешь

импорт xx из '@ / utils / somefile'

Это способ переназначения путей к модулям, а не часть самого ES, вы должны использовать функцию импорта babel.

Если вы используете Typescript, вы можете добиться этого, просто используя свой tsconfig.json вот так:

{
  "compilerOptions": {

    ...

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

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

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

so it's an alias which in this case points to the root of vue-cli generated src directory of the project

// @ - это псевдоним / src

Вдохновленный ответом Джана Рау, я сделал аналогичное открытие в моем файле src / views / Home.vue. Этот файл был создан с использованием последних (июль 2021 г., Ubuntu 20.04) версий: npx @ vue / cli create myfirstvue --default.

Я "предположил", это было / src, но хотел знать, почему, потому что Бен принял ответ сказал, что это будет корень моего проекта, который фактически является родителем / src.

Вот Home.vue:

...

Он определяется шаблоном Vue Webpack, который я узнал из этого другого ответа SO.

2022 WebDevInsider