Що робить символ @ у імпорті JavaScript?

Наприклад:

import Component from '@/components/component'

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

Значення та структура ідентифікатора модуля залежить від завантажувача модуля або пакета модуля . Навантажувач модулів не входить до специфікації ECMAScript. З точки зору мови JavaScript, ідентифікатор модуля є абсолютно непрозорим. Тож насправді залежить від того, який завантажувач / постачальник модулів ви використовуєте.

Ви, швидше за все, у своєму webpack / babel config мають щось на зразок babel-plugin-root-import .

В основному це означає з кореня проекту .. Уникає необхідності писати такі речіimport Component from '../../../../components/component'

Редагувати. Одна з причин існування - це те, що import Component from 'components/component'він не робить цього, а замість цього шукає в node_modulesпапці

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

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

тож це псевдонім, який у цьому випадку вказує на корінь src каталогу проекту, створеного vue-cli

Щоб відповісти Бену більш вичерпним:

Перш за все , необхідно додати 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 / компоненти / "]," @ core / ": [" src / core / "]}}," виключити ": [" node_modules "]}

в основному, як "ярлик": ["abs_path"]