Apa yang dilakukan simbol @ dalam impor javascript?

Sebagai contoh:

import Component from '@/components/component'

Dalam kode yang saya lihat itu berperilaku seperti ../naik satu tingkat di direktori relatif terhadap jalur file, tetapi saya ingin tahu lebih umum apa yang dilakukannya. Sayangnya saya tidak dapat menemukan dokumentasi online karena masalah pencarian simbol.

Arti dan struktur pengenal modul bergantung pada pemuat modul atau pemaket modul . Modul loader bukan bagian dari spesifikasi ECMAScript. Dari perspektif bahasa JavaScript, pengenal modul sepenuhnya buram. Jadi itu sangat tergantung pada pemuat / bundler modul yang Anda gunakan.

Kemungkinan besar Anda memiliki sesuatu seperti babel-plugin-root-import di konfigurasi webpack / babel Anda.

Pada dasarnya ini berarti dari root proyek .. itu menghindari harus menulis hal-hal seperti ituimport Component from '../../../../components/component'

Edit: Salah satu alasannya ada karena import Component from 'components/component'tidak melakukan itu tetapi mencari di node_modulesfolder

Tahu itu tua, tapi saya tidak yakin bagaimana itu didefinisikan, jadi cari, datang, gali sedikit lebih dalam dan akhirnya temukan ini di konfigurasi Webpack yang dihasilkan Vue-CLI ( Vue.js ) saya

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

jadi ini adalah alias yang dalam hal ini menunjuk ke root dari direktori src yang dihasilkan vue-cli dari proyek tersebut

Untuk membuat jawaban Ben lebih komprehensif:

Pertama Anda perlu menambahkan babel-plugin-root-importdi Anda devDependenciesdi package.json(Jika menggunakan yarn: yarn add babel-plugin-root-import --dev). Kemudian di .babelrctambahkan baris berikut ke dalam pluginskunci:

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

Sekarang, Anda bisa menggunakan @. Sebagai contoh:

Dari pada

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

Kamu bisa

import xx from '@/utils/somefile'

Seperti yang dikatakan di atas, fitur ini tidak ada di JS secara default. Anda harus menggunakan plugin babel untuk menikmatinya. Dan tugasnya sederhana. Ini memungkinkan Anda untuk menentukan sumber root default untuk file JS Anda dan membantu Anda memetakan impor file Anda ke sana. Untuk memulai instal melalui npm:

npm install babel-plugin-root-import --save-dev

atau

yarn add babel-plugin-root-import --dev

Buat .babelrcdi root aplikasi Anda dan konfigurasikan pengaturan ini sesuai selera Anda:

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathSuffix": "the-preferred/root/of-all-your/js/files",
      "rootPathPrefix": "@"
    }]
  ]
}

Dengan konfigurasi di atas, Anda cukup mengimpor dari sumber itu seperti:

import Myfile from "@/Myfile" 

tanpa melakukan semua hal yang funky ini:

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

Perhatikan bahwa Anda juga dapat mengubah simbol menjadi apa pun seperti "~"jika itu membuat perahu Anda mengapung.

Saya menggunakan kode VS untuk membangun Aplikasi asli bereaksi.

Yang Anda butuhkan adalah:

1. buat jsconfig.json di bawah jalur root Aplikasi Anda

2. di jsconfig.json Anda, tambahkan kode berikut:

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

pada dasarnya seperti "shortcut": ["abs_path"]

Ini adalah cara untuk memetakan ulang jalur modul, bukan bagian dari ES itu sendiri, Anda harus menggunakan fitur impor babel.