React Native: npm link 本地依赖，无法解析模块

Question

我正在为 React Native 开发一个按钮 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符号link，VSCode也可以在my-button包中自动完成功能。

但是执行示例应用程序会显示错误：

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

但是错误信息中的路径是正确的。

不知道我哪里错了，还是React-Native中有什么特殊的方式来处理link本地依赖？

我也试过npm install file:../.。它以这种方式工作正常，但在我编辑我的按钮后更新 example/ 中的依赖项并不容易。

Answer 1

改变你的package.json

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

Answer 2

运行进入同样的问题。虽然我无法让 npm link 正常工作，但我通过在项目文件夹

中安装本地包来解决这个问题

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

这将像普通包一样安装包，但从本地文件夹安装。缺点是您对包所做的更改不会反映出来。每次更改后您都必须 npm install。

Answer 3

npm link 命令不起作用，因为 React Native 打包器 doesn't support symlinks。

经过一番研究，我发现有两种方法可以解决这个问题。

在示例应用中使用 haul packager。 Haul 支持符号链接，因此您可以照常使用 npm link。
通过 file:../ 使用本地依赖项，然后编辑 node_modules 文件夹中的文件或每次进行更改时重新安装。

我找到了 Haul to work great for this use-case and even set-up a little starter project that also includes storybook，如果您有很多组件需要切换，这真的很有帮助。

Answer 4

尝试运行

npm run watch

在按钮包内。目前，我正在使用它来将库中的更改应用到我的主项目中。如果有效请告诉我！

Answer 5

尝试 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

Answer 6

我在围绕现有本机 SDK 开发本机模块包装器时遇到了同样的问题。起初我按照@aayush-shrestha 的建议在本地安装包。像这样：

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

只要我通过 NativeModules 引用该模块，它就可以工作。导入它：

import { NativeModules } from 'react-native';

然后像这样访问一个名为 ActualModuleName 的模块：

NativeModules.ActualModuleName

但是当我尝试按名称导入模块时它失败了:

import { ActualModuleName } from 'react-native-actualmodulename'

为了完成这项工作，我必须先打包包裹。运行在包的根目录中：

npm pack

这会生成一个 gzip 压缩包：

react-native-actualmodulename-1.0.0.tgz

现在将其安装到您的应用中：

npm install <path/to>/react-native-actualmodulename-1.0.0.tgz

这样做的一个巨大缺点是每次更改模块时都必须重新打包。我知道的唯一解决方法是直接修改 node_modules 中的包文件，然后在完成后将这些更改复制回您的存储库。

但好处是您的应用程序的源代码可以导入 ActualModuleName，就像您通过 npm 发布后导入它一样；无需特定于环境的代码。

Answer 7

我不能总是让它与 yarn link 一起工作。我发现特别有用的是 yalc:

首先永远全局安装一次：

npm install -g yalc

在本地library/package（我称之为my-local-package），以及运行：

yalc publish

然后在使用 my-local-package 作为依赖项的项目中，运行：（如果您已经通过任何其他方式添加了它，请先将其卸载 (npm uninstall -S my-lockal-package)

yalc add my-local-package
npm install

如果 my-local-package 是原生模块，那么运行 react-native run-android 到 link 依赖。（或运行-ios）

如果您对 my-lockal-package 进行任何更改，则：

cd path/of/my-local-package
yalc push //updates the local package
cd path/to/my-project
npm install
react-native run-android (or run-ios)

如果尚未应用更新，请尝试 cd android && ./gradlew clean && cd ..，然后重新运行：react-native run-android。

Answer 8

对于那些仍在寻找没有其他依赖的简单解决方案的人，试试这个：

yarn --version
1.21.1

npm --version
6.13.4

cd my-button
yarn install or npm install

在我的按钮中注册 link

yarn link or npm link

安装示例项目

cd example
yarn add ../ or npm add ../

link 到我的按钮

yarn link my-button or npm link my-button

完成 pod 安装（如果需要）

cd ios
pod install

Answer 9

我运行遇到了同样的问题。

我尝试使用 npm 安装本地模块，并一直运行无法解析模块的问题，即使我可以在 [=20= 中看到文件夹] 以及 class 和方法名称的自动完成。

在看到 github 上打开 issue 后，我可以通过使用 yarn 而不是 npm 安装本地库来绕过它。问题于 2020 年 9 月开始，Facebook 尚未发表评论。

Answer 10

您可以在 Metro 中使用 npm link。只需将 linked 包的源文件夹添加到 metro.config.js 中的 watchFolders。

Answer 11

这对我有用：

第 1 步转到包：

npm link packageNameHere

这将link这个包到全局node_module

步骤 2 转到您要使用此包的目录和运行这些

npm link pathToPackageDirectory
npm install pathToPackageDirectory

例如：npm link ~/myDemoPackage

这将 link 全局 node_moudle 到这个项目

如果要将包导入文件，请使用文件路径而不是包名称！

例如：

我的包名是stripe-api-helper。我的代码在 src/index.ts 那么我需要这样解决：

import { postStripe, Item } from '@aliciaForDemo/stripe-api-helper/src'

如果您使用“@aliciaForDemo/stripe-api-helper”，它将失败。

React Native: npm link 本地依赖，无法解析模块

React Native: npm link local dependency, unable to resolve module

npm

react-native

npm-link