web-dev-qa-db-fra.com

React Native: dépendance locale du lien npm, impossible de résoudre le module

Je suis en train de développer un paquet ui bouton pour réagir natif. J'essaie de construire un exemple de projet pour tester ce bouton. La structure de répertoire est la suivante:

my-button/
    package.json
    index.js
    example/
        package.json
        index.js

J'essaie d'utiliser npm link:

cd my-button
npm link

cd example
npm link my-button

Dans example/node_modules/ je peux voir le lien symbolique de mon bouton, VSCode peut également compléter automatiquement la fonction dans le package mon bouton.

Mais exécuter l'exemple d'application affichera une erreur:

Unable to resolve module my-button ...
Module does not exist in the module map or in these directories: ...

Mais le chemin dans le message d'erreur est correct.

Je ne sais pas où je me suis trompé, ou dans React-Native ont-ils un moyen spécial de traiter la dépendance de lien local?

J'ai aussi essayé npm install file:../.. Cela fonctionne bien de cette façon, mais il n’est pas facile de mettre à jour la dépendance dans example/ après avoir édité mon bouton.

react-nativenpmnpm-link
22
Rick Liao

La commande npm link ne fonctionne pas, car le gestionnaire de package React Native ne prend pas en charge les liens symboliques .

Après quelques recherches, j'ai découvert qu'il y avait deux façons de s'y prendre.

  1. Utilisez haul packager dans l'exemple d'application. Haul supporte les liens symboliques, vous pouvez donc utiliser npm link comme d'habitude.
  2. Utilisez la dépendance locale via file:../, puis modifiez les fichiers du dossier node_modules ou réinstallez-le chaque fois que vous apportez des modifications.

J'ai trouvé Haul de travailler très bien pour ce cas d'utilisation et même de mettre en place un petit projet de démarrage qui inclut également storybook , ce qui est vraiment utile si vous avez plusieurs composants à basculer.

12
pavloko

Essayez wml ( https://github.com/wix/wml )

C'est une alternative à npm link qui copie les fichiers modifiés des dossiers sources vers les dossiers de destination.

# add the link to wml using `wml add <src> <dest>`
wml add ~/my-package ~/main-project/node_modules/my-package

# start watching all links added
wml start
15
Asaf Katz

Couru dans le même problème. Bien que je ne puisse pas faire fonctionner npm link comme il se doit, j’ai corrigé le problème en installant le paquet local dans le dossier du projet.

npm install ../<package-folder> --save

Cela installera le paquet comme un paquet ordinaire mais à partir du dossier local. L'inconvénient est que les modifications que vous apportez sur l'emballage ne seront pas reflétées. Vous devrez npm install après chaque modification.

2
aayush shrestha

Changez votre package.json

//...
"dependencies": {
   //...
    "my-button" : "file:../"
  },
//...
0
KimHau