Dépendances JavaScript de Road to Hell

Qu'est-ce qu'un package JavaScript?

Qu'est-ce que package.json?

• Il répertorie les packages dont dépend votre projet (il s'agit d'une liste de dépendances de projet).
• Dans ce document, en utilisant les règles de gestion de versions sémantique, les versions des packages de dépendances que votre projet peut utiliser sont définies.
• Il vous permet de reproduire l'environnement nécessaire au fonctionnement du package et, par conséquent, simplifie le transfert du projet à d'autres développeurs.

Types de dépendances dans package.json

• dependencies - ce sont des dépendances ordinaires, dont la fonctionnalité est utilisée dans le projet, et qui sont accessibles à partir de son code.
• devDependencies- ce sont des dépendances de développement. Par exemple, la plus jolie bibliothèque utilisée pour formater le code.
• peerDependencies - si des dépendances sont écrites dans cette section, le développeur du package informe ainsi celui qui va l'installer qu'il aura besoin d'une version spécifique du package spécifiée dans cette section.
• optionalDependencies - ils listent les dépendances optionnelles, telles que l'impossibilité d'installation qui ne violera pas le processus d'installation du package.
• bundledDependencies — , . , NPM, , .

package-lock.json

    "react": {
      "version": "16.13.0",
      "resolved": "https://registry.npmjs.org/react/-/react-16.13.0.tgz",
      "integrity": "sha512-TSavZz2iSLkq5/oiE7gnFzmURKZMltmi193rm5HEoUDAXpzT9Kzw6oNZnGoai/4+fUnm7FqS5dwgUL34TujcWQ==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
        "prop-types": "^15.6.2"
      }
    }

Comprendre les dépendances de Gatsby.js

$ npm install --save gatsby

...

+ gatsby@2.19.28
added 1 package from 1 contributor, removed 9 packages, updated 10 packages and audited 19001 packages in 40.382s

$ npm ls lodash
example-js-package@1.0.0
└─┬ gatsby@2.19.28
  ├─┬ @babel/core@7.8.6
  │ ├─┬ @babel/generator@7.8.6
  │ │ └── lodash@4.17.15  deduped
  │ ├─┬ @babel/types@7.8.6
  │ │ └── lodash@4.17.15  deduped
  │ └── lodash@4.17.15  deduped
  ├─┬ @babel/traverse@7.8.6
  │ └── lodash@4.17.15  deduped
  ├─┬ @typescript-eslint/parser@2.22.0
  │ └─┬ @typescript-eslint/typescript-estree@2.22.0
  │   └── lodash@4.17.15  deduped
  ├─┬ babel-preset-gatsby@0.2.29
  │ └─┬ @babel/preset-env@7.8.6
  │   ├─┬ @babel/plugin-transform-block-scoping@7.8.3
  │   │ └── lodash@4.17.15  deduped
  │   ├─┬ @babel/plugin-transform-classes@7.8.6
  │   │ └─┬ @babel/helper-define-map@7.8.3
  │   │   └── lodash@4.17.15  deduped
  │   ├─┬ @babel/plugin-transform-modules-amd@7.8.3
  │   │ └─┬ @babel/helper-module-transforms@7.8.6
  │   │   └── lodash@4.17.15  deduped
  │   └─┬ @babel/plugin-transform-sticky-regex@7.8.3
  │     └─┬ @babel/helper-regex@7.8.3
  │       └── lodash@4.17.15  deduped
  ...

$ du -sh node_modules
200M    node_modules

$ du -sh ./node_modules/* | sort -nr | grep '\dM.*'
 17M    ./node_modules/rxjs
8.4M    ./node_modules/@types
7.4M    ./node_modules/core-js
6.8M    ./node_modules/@babel
5.4M    ./node_modules/gatsby
5.2M    ./node_modules/eslint
4.8M    ./node_modules/lodash
3.6M    ./node_modules/graphql-compose
3.6M    ./node_modules/@typescript-eslint
3.5M    ./node_modules/webpack
3.4M    ./node_modules/moment
3.3M    ./node_modules/webpack-dev-server
3.2M    ./node_modules/caniuse-lite
3.1M    ./node_modules/graphql
...

$ npm dedup
moved 1 package and audited 18701 packages in 4.622s

51 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Visualisation des dépendances

Conclusion: une grande puissance s'accompagne d'une grande responsabilité