web-dev-qa-db-ja.com

React Native：npmリンクローカル依存関係、モジュールを解決できません

反応ネイティブのボタンuiパッケージを開発しています。このボタンをテストするためのサンプルプロジェクトをビルドしようとしています。ディレクトリ構造は次のとおりです。

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

npm linkを使用しようとしました：

cd my-button
npm link

cd example
npm link my-button

example/node_modules/でmy-buttonシンボリックリンクを確認できます。VSCodeはmy-buttonパッケージの機能を自動補完することもできます。

ただし、サンプルアプリを実行するとエラーが表示されます。

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

ただし、エラーメッセージのパスは正しいです。

私が間違っていた場所がわからない、またはReact-Nativeではリンクローカル依存関係に対処する特別な方法がありますか？

npm install file:../.も試しました。この方法で正常に動作しますが、my-buttonを編集した後、example/の依存関係を更新するのは簡単ではありません。

react-nativenpmnpm-link
33
Rick Liao

npm linkコマンドは、React Native packager symlinksをサポートしない 。

少し調査した結果、2つの方法があることを発見しました。

  1. サンプルアプリでは haul packager を使用します。 Haulはシンボリックリンクをサポートしているため、通常どおりnpm linkを使用できます。
  2. file:../を介してローカルの依存関係を使用し、node_modulesフォルダー内のファイルを編集するか、変更を加えるたびに再インストールします。

Haul がこのユースケースに最適であり、 little starter project をセットアップすることもできました。これには storybook も含まれています。切り替えるコンポーネントが多数ある場合。

23
pavloko

試すwml（- https://github.com/wix/wml ）

npm linkの代わりに、変更されたファイルをソースから宛先フォルダーに実際にコピーします

# 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
21
Asaf Katz

同じ問題に遭遇しました。 npm link動作するはずです。ローカルフォルダをプロジェクトフォルダにインストールすることで回避しました

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

これにより、パッケージは通常のパッケージと同様に、ローカルフォルダーからインストールされます。欠点は、パッケージに加えた変更が反映されないことです。あなたはしなければならない npm installすべての変更後。

3
aayush shrestha

Package.jsonを変更します

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