What does the @ symbol do in javascript imports?

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.

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 import Component from 'components/component' doesn't do that but instead search in the node_modules folder

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

To make Ben's answer more comprehensive:

First you need to add babel-plugin-root-import in your devDependencies in package.json (If using yarn: yarn add babel-plugin-root-import --dev). Then in your .babelrc add the following lines into plugins key:

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

Now, you can use @. For example:

Instead of

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

You Can

import xx from '@/utils/somefile'

As said above, this feature is not in JS by default. You have to use a babel plugin to enjoy it. And its job is simple. It allows you to specify a default root source for your JS files and helps you map your file imports to it. To get started install through either npm:

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

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

Create a .babelrc in the root of your app and configure these settings to your taste:

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

With the config above, you can simply import from that source like:

import Myfile from "@/Myfile"

without doing all this funky stuff:

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

Note that you can also change the symbol to anything like "~" if that floats your boat.

I am using VS code to build react native Apps.

What you need is:

create a jsconfig.json under root path of your App
in your jsconfig.json, add the following code:

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

basically like "shortcut" : ["abs_path"]

What does the @ symbol do in javascript imports?

Related

Recent Posts