111

Is there anything different about the dependencies that start with @?

Does that mean or imply something? I don't see any info about that. Take a look at my node_modules folder: folder view

Fortawesome starts with @ and does not contain the typical fortawesome.css file. So is it the same? Or does the @ indicate something?

This is my package.json:

{
  "name": "ng-frontend",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@fortawesome/fontawesome": "^1.1.4",
    "animate.css": "^3.6.1",
    "bootstrap": "^4.0.0",
    "core-js": "^2.4.1",
    "jasny-bootstrap": "^3.1.3",
    "jquery": "^3.3.1",
    "popper.js": "^1.12.9",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.2",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

This question is not about Angular.

Oscar
  • 1,929
  • 3
  • 16
  • 31
  • 41
    This question fits under ["software tools commonly used by programmers"](https://stackoverflow.com/help/on-topic) so I'd argue it's blatantly *on*-topic. – Kos Mar 07 '18 at 12:25
  • 1
    Exactly what I was about to say, @Kos. – T.J. Crowder Mar 07 '18 at 12:26
  • 1
    This is on topic BTW. @ specifies grouping and scoping similar packages together. The packages preceded with @ are scoped packages. – Bharat Mar 07 '18 at 12:27
  • Can you post your `package.json`? – Gonzalo Matheu Mar 07 '18 at 12:37
  • read this official blog for naming rule http://blog.npmjs.org/post/168978377570/new-package-moniker-rules/ – xkeshav Mar 07 '18 at 19:21
  • 2
    @Oscar While the other question is in the context of angular, **the same answer applies**. You'll notice that the answer does not mention angular. It is not specific to angular. Should we also ask it with a `@react` prefixed package? What about vuejs, should we ask yet another question that asks the same but about vuejs packages? (Note that a duplicate is still "on-topic", just already asked). – Félix Adriyel Gagnon-Grenier Mar 08 '18 at 14:26

3 Answers3

64

If a package's name begins with @, then it is a scoped package. The scope is everything in between the @ and the slash

@scope/project-name

How to Initialize a Scoped Package

To create a scoped package, you simply use a package name that starts with your scope.

{
  "name": "@username/project-name"
}

More details, Please visit scoped package

and

What does "@" symbol mean in "import { Component } from '@angular/core';" statement?

Ramesh Rajendran
  • 37,412
  • 45
  • 153
  • 234
  • 1
    I dont think `@scope/project-name` is a good example as the scoping may be the project name and the later a package within that project. For example `@babel/core` ... Babel is the project and core is the package. – AndrewMcLagan Nov 13 '19 at 12:53
  • When used in package names, scopes are preceded by an @ symbol and followed by a slash, e.g. @somescope/somepackagename Scopes are a way of grouping related packages together, and also affect a few things about the way npm treats the package. As well as can signal authority / ownership. Reference Link: https://docs.npmjs.com/cli/v7/using-npm/scope – Kodali444 Feb 13 '22 at 18:34
23

@ refer to npm scoped packages:

When used in package names, scopes are preceded by an @ symbol and followed by a slash

Scopes are a way of grouping related packages together.

For instance, your package.json contains some @angular/ prefixed dependencies (@angular/animations, @angular/compiler-cli, etc) which means that they are under angular scope. The code of all those dependencies is under @angular directory.

Gonzalo Matheu
  • 8,984
  • 5
  • 35
  • 58
  • 6
    There aren't any `/`s or equivalent in the names in the screenshot, so I'm guessing the `@angular` is not actually a package, but a scope, and there will be sub-folders for the individual packages? – IMSoP Mar 07 '18 at 12:39
  • @IMSoP Each package is stored in `node_modules/. So `@angular/cli` would be inside the `@angular/cli` folder. Since the OP did not open the `@angular` folder, you can't see the `cli` folder inside. – Shukant Pal Apr 18 '20 at 21:18
14

packages with @ denotes the organisation. In this case the organisation is Fortawesome. It contains multiple packages (you can see it inside @fortawesome folder).

As described on npm page

Creating an Organization on npm gives you an Organization scope under which you can have your own namespace for packages.

Scopes are great for many reasons, for example:

  • Maintain a fork of a package, e.g. @the-best/request.
  • Avoiding name disputes with popular names, e.g. @the-best/cat.
  • Improving internal discovery of Organization-supported packages (they're all in a single namespace!)

Hope that helps.

Farhan Haque
  • 991
  • 1
  • 9
  • 21