Javascript ithalatında @ sembolü ne yapar?

141

Örneğin:

import Component from '@/components/component'

Ben bakıyorum kodda ../dosya yoluna göre dizinde bir düzey yukarı gidiyor gibi davranır , ama daha genel olarak ne yaptığını bilmek istiyorum. Maalesef, sembol arama sorunu nedeniyle çevrimiçi herhangi bir belge bulamıyorum.

javascript

— Lazer
kaynak

Düğüm modülü adlarında @ simgesinin

— Bergi

158

Modül tanımlayıcının anlamı ve yapısı modül yükleyicisine veya modül paketleyicisine bağlıdır . Modül yükleyici ECMAScript spesifikasyonunun bir parçası değildir. JavaScript dili açısından, modül tanımlayıcısı tamamen opaktır. Bu gerçekten kullandığınız modül yükleyiciye / paketleyiciye bağlıdır.

Büyük olasılıkla webpack / babel yapılandırmanızda babel-plugin-root-import gibi bir şey var .

Temelde bu projenin kökünden geliyor .. gibi şeyler yazmak zorunda kalmazimport Component from '../../../../components/component'

Düzenleme:import Component from 'components/component' Var olmasının bir nedeni , bunu yapmak değil, bunun yerine node_modulesklasörde arama

— Ben
kaynak

2

Cevabımı geliştirdiği için @ felix-kling'e teşekkürler. "Standart bir şey değil" den çok daha iyi bir açıklama :)

— Ben

84

Eski olduğunu bilin, ancak nasıl tanımlandığından tam olarak emin değildim, bu yüzden baktım, geldi, biraz daha derine kazdım ve sonunda bunu Vue-CLI ( Vue.js ) tarafından oluşturulan Webpack yapılandırmamda buldum

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

yani bu durumda projenin vue-cli tarafından oluşturulan src dizininin kökünü gösterir.

— Can Rau
kaynak

Böyle bir şey kullanmak mümkün mü? '@*': ['client/src/*']nerede sadece sonradan @ alınır, böylece ben yapabilirim import X from '@components/xve doğru erişmeye çalışır client/src/components/x? TS + VSCode zaten tsconfig.json bu tam biçiminde izin verir, ancak webpack hataları ile Can't resolve '@components/x' in 'client/src/'. Çözümünüze değiştirdiğimde ve ona aktarma yolları import X from '@/components/x'hemen çalışmaya başladığında, yollar başka şekilde doğrudur.

— Qwerty

@Qwerty Fikrim yok, bilmiyorum @ * şey VSCode'da var olduğunu bilmiyordu, bu yüzden yardım edemez

— Can Rau

29

Ben'in cevabını daha kapsamlı hale getirmek için :

Öncelikle eklemeniz gerekir babel-plugin-root-importsenin içinde devDependenciesin package.json(kullanılıyorsa yarn: yarn add babel-plugin-root-import --dev). Ardından anahtarınıza .babelrcaşağıdaki satırları ekleyin plugins:

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

Şimdi kullanabilirsiniz @. Örneğin:

Onun yerine

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

Yapabilirsin

import xx from '@/utils/somefile'

— Ali MasudianPour
kaynak

Eklentiyi benim bağımlılıklarıma ekledim ama .babelrc'im yok. Hatta kökte bile yarattım, ama yine de çalışmıyor? Ben sadece babel.config.js var

— Kick Buttowski

8

Yukarıda belirtildiği gibi, bu özellik varsayılan olarak JS'de değildir. Zevk için bir babel eklentisi kullanmanız gerekir. Ve işi basit. JS dosyalarınız için varsayılan bir kök kaynağı belirtmenize olanak tanır ve dosya içe aktarmalarınızı bu dosyaya eşlemenize yardımcı olur. Yüklemeyi npm'den biriyle başlatmak için:

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

veya

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

.babelrcUygulamanızın kök dizininde bir tane oluşturun ve bu ayarları zevkinize göre yapılandırın:

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

Yukarıdaki yapılandırma ile bu kaynaktan aşağıdaki gibi içe aktarabilirsiniz:

import Myfile from "@/Myfile"

tüm bu korkak şeyleri yapmadan:

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

Sembolü "~", teknenizde yüzen gibi bir şeyle de değiştirebileceğinizi unutmayın.

— pervaz
kaynak

0

Yerel uygulamalar tepki oluşturmak için VS kodu kullanıyorum.

İhtiyacınız olan şey:

Uygulamanızın kök yolu altında bir jsconfig.json oluşturun
jsconfig.json'unuza aşağıdaki kodu ekleyin:

{"compilerOptions": {"baseUrl": ".", "target": "ES6", "modül": "commonjs", "paths": {"@ / ": ["src / "], "@ bileşenler / ": [" src / components / "]," @ core / ": [" src / core / "]}}," hariç tut ": [" node_modules "]}

temel olarak "kısayol" gibi: ["abs_path"]

— Daniel Hua
kaynak