Biểu tượng @ làm gì trong nhập javascript?

Ví dụ:

import Component from '@/components/component'

Trong mã tôi đang xem nó hoạt động như ../đi lên một cấp trong thư mục liên quan đến đường dẫn tệp, nhưng tôi muốn biết nhiều hơn về những gì nó làm. Thật không may, tôi không thể tìm thấy bất kỳ tài liệu trực tuyến do vấn đề tìm kiếm biểu tượng.

Ý nghĩa và cấu trúc của mã định danh mô-đun phụ thuộc vào trình tải mô-đun hoặc bộ đóng gói mô-đun . Trình tải mô-đun không phải là một phần của thông số ECMAScript. Từ góc độ ngôn ngữ JavaScript, mã định danh mô-đun hoàn toàn mờ đục. Vì vậy, nó thực sự phụ thuộc vào trình tải / gói mô-đun mà bạn đang sử dụng.

Bạn rất có thể có một cái gì đó như babel-plugin-root-import trong webpack / babel config của bạn.

Về cơ bản nó có nghĩa là từ gốc của dự án .. nó tránh phải viết những thứ nhưimport Component from '../../../../components/component'

Chỉnh sửa: Một lý do nó tồn tại là vì import Component from 'components/component'không làm điều đó mà thay vào đó tìm kiếm trong node_modulesthư mục

Biết nó đã cũ, nhưng tôi không chắc chắn chính xác nó được định nghĩa như thế nào, vì vậy, tìm kiếm nó, tìm thấy, đào sâu hơn một chút và cuối cùng tìm thấy điều này trong cấu hình Webpack được tạo Vue-CLI ( Vue.js ) của tôi

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

Vì vậy, đó là một bí danh mà trong trường hợp này chỉ đến thư mục gốc của thư mục src vue-cli đã tạo của dự án

Để làm cho câu trả lời của Ben toàn diện hơn:

Trước tiên, bạn cần phải thêm babel-plugin-root-importvào của bạn devDependenciestrong package.json(Nếu sử dụng yarn: yarn add babel-plugin-root-import --dev). Sau đó, bạn .babelrcthêm các dòng sau vào pluginskhóa:

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

Bây giờ, bạn có thể sử dụng @. Ví dụ:

Thay vì

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

Bạn có thể

import xx from '@/utils/somefile'

Như đã nói ở trên, tính năng này không có trong JS theo mặc định. Bạn phải sử dụng một plugin babel để thưởng thức nó. Và công việc của nó rất đơn giản. Nó cho phép bạn chỉ định nguồn gốc mặc định cho các tệp JS của bạn và giúp bạn ánh xạ tệp nhập của mình vào đó. Để bắt đầu cài đặt thông qua npm:

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

hoặc là

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

Tạo một .babelrcgốc trong ứng dụng của bạn và định cấu hình các cài đặt này theo sở thích của bạn:

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

Với cấu hình ở trên, bạn chỉ cần nhập từ nguồn đó như:

import Myfile from "@/Myfile" 

mà không làm tất cả những thứ thú vị này:

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

Lưu ý rằng bạn cũng có thể thay đổi biểu tượng thành bất cứ điều gì như "~"nếu nó nổi thuyền của bạn.

Tôi đang sử dụng mã VS để xây dựng Ứng dụng gốc.

Những gì bạn cần là:

1. tạo jsconfig.json theo đường dẫn gốc của Ứng dụng của bạn

2. trong jsconfig.json của bạn, thêm mã sau đây:

   {"Trình biên dịch": {"baseUrl": ".", "target": "ES6", "module": "commonjs", "path": {"@ / ": ["src / "], "@components / ": [" src / thành phần / "]," @ core / ": [" src / core / "]}}," loại trừ ": [" node_modules "]}

về cơ bản như "phím tắt": ["abs_path"]