What does the @ symbol do in javascript imports?

javascript

2022-08-30 00:24:05

For example:

import Component from '@/components/component'

In the code I'm looking at it behaves like going up one level in the directory relative to the file path, but I'd like to know more generally what it does. Unfortunately I can't find any documentation online due to the symbol searching problem. ../

答案 1

The meaning and structure of the module identifier depends on the module loader or module bundler. The module loader is not part of the ECMAScript spec. From a JavaScript language perspective, the module identifier is completely opaque. So it really depends on which module loader/bundler you are using.

You most likely have something like babel-plugin-root-import in your webpack/babel config.

Basically it means from the root of the project.. it avoids having to write things like import Component from '../../../../components/component'

Edit: One reason it exists is because doesn't do that but instead search in the folderimport Component from 'components/component'node_modules

答案 2

Know it's old, but I wasn't exactly sure how it's defined, so looked it up, came by, dug a little deeper and finally found this in my Vue-CLI (Vue.js) generated Webpack config

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

so it's an alias which in this case points to the root of vue-cli generated src directory of the project

Update: As correctly mentioned by @aderchox in the comments, this is a general Webpack feature and not limited to Vue