web-dev-qa-db-fra.com

Comment utilisez-vous les propriétés «fichiers» et «répertoires» dans package.json?

Si un package.json a un files prop, et/ou un directories prop:

  "files": [
    "./src/assets/fonts/"
  ],
  "directories": {
     "assets:": "./src/assets"
  }

Quels sont les moyens de les utiliser? La documentation ne mentionne pas ce qui peut être fait avec eux une fois qu'ils ont été spécifiés.

Par exemple, les fichiers docs disent:

Le champ "fichiers" est un tableau de fichiers à inclure dans votre projet. Si vous nommez un dossier dans le tableau, il inclura également les fichiers à l'intérieur de ce dossier.

Que signifie "inclure dans votre projet"? Inclure où? Comment sont-ils accessibles maintenant qu'ils ne l'étaient pas auparavant?

Dans la section répertoires , les docs disent:

À l'avenir, ces informations pourront être utilisées de autres manières créatives.

Quelles sont les façons créatives existantes de l'utiliser?

55
Baz

"inclure dans votre projet" signifie que les fichiers seront dans l'archive compressée qui est créée lorsque vous exécutez npm publish. Vous pouvez également exécuter npm pack pour générer l'archive tar à inspecter sans déclencher de publication. De cette façon, vous pouvez réellement ouvrir l'archive tar générée et inspecter les fichiers qui étaient/n'étaient pas inclus.

Tandis que .npmignore (ou .gitignore comme proxy, si non .npmignore) fonctionne comme une liste noire de fichiers à ignorer (incluant ainsi tout le reste par défaut), le tableau files est une liste blanche. Autrement dit, au lieu de tout inclure par défaut, si files tableau est spécifié, tout est exclu par défaut et seuls les fichiers explicitement répertoriés seront inclus dans l'archive compressée empaquetée.

Par exemple, supposons que votre package soit une bibliothèque destinée à être consommée dans le navigateur. Votre code est dans lib/, et vous exécutez browserify pour compiler dans une bibliothèque compatible avec le navigateur à dist/index.js. Vous commencez avec un tas de fichiers répertoriés dans .gitignore, qui est utilisé de facto .npmignore qui n'existe pas. Mais maintenant que dist/ est plein de fichiers générés, vous voulez qu'ils soient ignorés du git repo. Si vous les ajoutez à .gitignore, ils seront exclus du dépôt git, mais ils seront également ignorés de l'archive tar du paquet. Vous avez donc deux options: dupliquez votre .gitignore comme .npmignore mais uniquement la liste dist/ dans .gitignore. Si vous faites cela, vous devrez garder deux fichiers presque mais pas tout à fait synchronisés. Cette façon est tedius et sujette aux erreurs.

L'autre alternative est de ne pas avoir de .npmignore, et listez simplement les fichiers que vous voulez réellement dans le package, dans le tableau files. README.*, package.json, CHANGELOG.* (peut-être quelques autres) sont automatiquement inclus dans l'archive tar. Il vous suffit donc d'ajouter "files": [ "dist" ] et tu as fini. Maintenant, l'archive tar de votre package n'inclura pas le JS source d'origine de lib, ni tests/ etc mais ne contiendra à la place que la bibliothèque compilée réelle dans dist/.

En ce qui concerne directories, je répertorie généralement les lib (pour es5), src (pour es6, coffeescript, sources TypeScript, etc.), dist (pour le navigateur ou versions spécifiques à vm), test, output (pour les fichiers générés temporairement comme les rapports de couverture, etc.), doc, etc. Bien que cette propriété ne soit pas utilisée directement par npm ou d'autres outils, il rend la structure du répertoire explicite. De plus, cela rend les répertoires référencables dans les scripts npm comme ceci:

"scripts": {
  "clean": "rm -rf $npm_package_directories_dist $npm_package_directories_output",
  "lint": "eslint $npm_package_directories_src",
  "test": "teenytest $npm_package_directories_test",
}

De cette façon, les répertoires ne sont spécifiés qu'une seule fois, et s'ils changent, ils n'ont besoin d'être modifiés que dans un seul emplacement (plutôt que plusieurs dans le package.json).

72
jasonkarns