Javascript importlarında @ sembolü ne işe yarar?

Örneğin:

import Component from '@/components/component'

İncelediğim kodda, dosya yoluna göre dizinde bir seviye yukarı çıkan ../ gibi davranıyor, ama genel olarak ne yaptığını daha fazla bilmek istiyorum. Ne yazık ki, sembol arama problemi nedeniyle çevrimiçi herhangi bir belge bulamıyorum.

Cevap #1

Modül tanımlayıcısının anlamı ve yapısı, modül yükleyici veya modül paketleyici'ye 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 şeffaf değildir. Yani gerçekten hangi modül yükleyici/paketleyici kullandığınıza bağlıdır.

Muhtemelen webpack/babel yapılandırmanızda babel-plugin-root-import benzeri bir şeye sahipsiniz.

Temelde bu, projenin kökünden anlamına gelir.. import Component from ''../../../../components/component'' gibi şeyler yazma zorunluluğunu önler

Düzenle: Var olmasının bir nedeni, import Component from 'components/component' bunun yerine bunu yapmaması, ama onun yerine node_modules klasöründe aramasıdır

Cevap #2

Eski olduğunu biliyorum, ama tam olarak nasıl tanımlandığından emin değildim, bu yüzden baktım, uğradım, biraz daha derine indim ve sonunda Vue-CLI (Vue.js) tarafından üretilen Webpack konfigürasyonumda bunu buldum

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

yani bu, bu durumda projenin vue-cli tarafından oluşturulan src dizininin kökünü gösteren bir takma addır

Güncelleme: Yorumlarda @aderchox'un doğru bir şekilde belirttiği gibi, bu genel bir Webpack özelliğidir ve Vue ile sınırlı değildir

Cevap #3

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

Öncelikle package.json dosyanızdaki devDependencies bölümüne babel-plugin-root-import eklemeniz gerekir (Eğer yarn kullanıyorsanız: yarn add babel-plugin-root-import --dev). Daha sonra .babelrc dosyanızda plugins anahtarına aşağıdaki satırları ekleyin:

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

Artık @ kullanabilirsiniz. Örneğin:

Yerine

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

Yapabilirsin

import xx from '@/utils/somefile'

Cevap #4

Yukarıda belirtildiği gibi, bu özellik JS'te varsayılan olarak bulunmamaktadır. Bunu kullanmak için bir babel eklentisi kullanmanız gerekir. Ve işi basittir. JS dosyalarınız için varsayılan bir kök kaynak belirtmenize ve dosya importlarınızı buna göre eşleştirmenize olanak tanır. Başlamak için npm aracılığıyla kurulum yapabilirsiniz:

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

veya

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

Uygulamanızın kök dizininde bir .babelrc 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 konfigürasyonla, o kaynaktan basitçe şu şekilde ithalat yapabilirsiniz:

import Myfile from "@/Myfile"

tüm bu garip şeyleri yapmadan:

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

Simgesini, hoşunuza giderse "~" gibi herhangi bir şeyle de değiştirebileceğinizi unutmayın.

Cevap #5

Typescript kullanıyorsanız, bunu basitçe tsconfig.json dosyanızı şöyle kullanarak başarabilirsiniz:

{
  "compilerOptions": {

    ...

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

Cevap #6

React Native uygulamaları geliştirmek için VS Code kullanıyorum.

İhtiyacınız olan şey şudur:

  1. Uygulamanızın kök yolunda bir jsconfig.json oluşturun

  1. Kendi jsconfig.json dosyanıza, aşağıdaki kodu ekleyin:
{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ES6",
    "module": "commonjs",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@core/*": ["src/core/*"]
    }
  },
  "exclude": ["node_modules"]
}

temelde "kısayol" : ["abs_path"] gibi

İlgili makaleler