web-dev-qa-db-fra.com

Importer à partir du sous-dossier du package npm

J'ai travaillé sur la création d'une petite bibliothèque de composants React pour une utilisation dans plusieurs autres projets. Je publie le package en interne (en utilisant un référentiel GitHub privé), puis en l'incluant dans un autre projet. Cependant , lorsque je vais importer à partir d'un sous-répertoire du package, je ne peux pas le faire car les chemins ne correspondent pas.

Les projets utilisant le package utilisent tous webpack pour regrouper/transpiler du code car j'essaye d'éviter de faire tout bâtiment dans la bibliothèque de composants si possible.

Structure du répertoire

- package.json
- src/
  - index.js
  - Button/
    - index.js
    - Button.jsx
    - ButtonGroup.jsx
  - Header/
    - index.js
    - Header.jsx (default export)

package.json 

...
"main": "./src/index.js",
"scripts": "",
...

src/Button/index.js 

import Button from './Button';
import ButtonGroup from './ButtonGroup';

export default Button;

export { Button, ButtonGroup};

src/index.js

Ce fichier est-il réellement nécessaire si vous importez uniquement à partir de sous-répertoires?

import Button from './Button';
import ButtonGroup from './Button/ButtonGroup';
import Header from './Header';

export { Button, ButtonGroup, Header };

Autre projet 

// This project is responsible for building/transpiling after importing
import { Button, ButtonGroup } from 'components-library/Button';

Exemple

Material-UI est une bibliothèque de composants React) qui est utilisée en exigeant de la manière suivante: import { RadioButtonGroup } from 'material-ui/RadioButton. J'ai essayé de comprendre comment cela fonctionne pour eux, mais en vain pour le moment.

Questions similaires

  • Comment importer un module dans un sous-dossier de package npm avec webpack?
    • C'est presque l'approche correcte dont j'ai besoin, sauf que le chemin d'importation utilisé ici impliquait le src/ répertoire, que j'essaye d'éviter (devrait être component-library/item, ne pas component-library/src/item (qui fonctionne actuellement)
  • Publication de packages NPM plats
    • C'est exactement ce que je veux, sauf que j'espérais ne pas avoir de phase de "construction" dans le package (compter sur l'importation des emplacements pour construire/transpiler)

Des questions

  1. Puis-je ignorer le src/ répertoire en quelque sorte dans le chemin d'importation?
  2. Puis-je ignorer tout type de phase de construction dans le package (pour que les développeurs n'aient pas à construire avant de valider)?
  3. Comment un package similaire à Material-UI gère-t-il cela?
javascriptnode.jsnpmwebpackpackage.json
16
Kendall

La réponse peut dépendre de la façon dont vous avez installé votre bibliothèque de composants. Si vous l'avez fait via npm install <git-Host>:<git-user>/<repo-name> ou npm install <git repo url>,

  1. Tu devrais être capable de import {Button} from 'component-library/Button' tel quel, selon votre première question liée . Semblable à résolution require () du nœud , Webpack doit résoudre les sous-répertoires de la bibliothèque de composants par rapport au point d'entrée de la bibliothèque de composants. Vous pouvez trouver les documents sur la personnalisation du comportement de résolution via la propriété webpack.config.resolve . material-ui semble dépendre de la résolution des importations de sous-répertoire à partir du répertoire d'entrée du module.

  2. Pour distribuer une bibliothèque de modules ES, il n'est pas nécessaire de construire avant la distribution. Cependant, des projets tels que create-react-app peuvent nécessiter une version pré-transpilée.

Vous pouvez également écrire import {Button} from 'components-library'. Webpack retracera les dépendances à travers chaque index sans problème.

1
Steven Kalt