สัญลักษณ์ @ ทำอะไรในการนำเข้า JavaScript?

ตัวอย่างเช่น:

import Component from '@/components/component'

ในโค้ดฉันกำลังดูว่ามันทำงานเหมือน../ขึ้นหนึ่งระดับในไดเร็กทอรีที่สัมพันธ์กับเส้นทางไฟล์ แต่ฉันต้องการทราบข้อมูลเพิ่มเติมโดยทั่วไปว่ามันทำอะไร ขออภัยไม่พบเอกสารออนไลน์ใด ๆ เนื่องจากปัญหาในการค้นหาสัญลักษณ์

ความหมายและโครงสร้างของโมดูลระบุขึ้นอยู่กับรถตักดินแบบโมดูลหรือBundler โมดูล ตัวโหลดโมดูลไม่ได้เป็นส่วนหนึ่งของข้อมูลจำเพาะ ECMAScript จากมุมมองของภาษา JavaScript ตัวระบุโมดูลจะทึบทั้งหมด ดังนั้นจึงขึ้นอยู่กับว่าคุณใช้ตัวโหลด / บันเดิลโมดูลใด

คุณมักจะมีบางอย่างเช่นbabel-plugin-root-importใน webpack / babel config

โดยทั่วไปหมายถึงจากรากของโครงการ .. หลีกเลี่ยงการเขียนสิ่งต่างๆเช่น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)
    }
},

ดังนั้นจึงเป็นนามแฝงซึ่งในกรณีนี้ชี้ไปที่รูทของ vue-cli ที่สร้างไดเร็กทอรี src ของโครงการ

เพื่อให้คำตอบของ Benครอบคลุมมากขึ้น:

ครั้งแรกที่คุณจะต้องเพิ่ม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 ภายใต้ root path ของแอพของคุณ

2. ใน jsconfig.json ของคุณเพิ่มรหัสต่อไปนี้:

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

โดยพื้นฐานแล้วจะเหมือนกับ "ทางลัด": ["abs_path"]

เป็นวิธีการรีแมปเส้นทางโมดูลไม่ใช่ส่วนหนึ่งของ ES เองคุณต้องใช้คุณสมบัติการนำเข้า babel