React Native:npm链接本地依赖项,无法解析模块

Question

我正在开发一个用于反应原生的按钮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/我可以看到我的按钮符号链接,VSCode也可以在我的按钮包中自动完成功能.

但执行示例应用程序将显示错误:

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

但错误消息中的路径是正确的.

不知道我错在哪里,或者在React-Native中有什么特殊的方式来处理链接本地依赖？

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

Answer 1

该npm link命令不起作用,因为React Native packager 不支持符号链接.

经过一番研究,我发现有两种方法可以解决它.

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

我发现Haul非常适合这个用例,甚至还设置了一个包含故事书的小启动项目,如果你有很多组件可以切换,这真的很有帮助.

Answer 2

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

您可以使用 Metro 来使用 npm 链接。只需将链接包的源文件夹添加到watchFolders您的metro.config.js.

Answer 4

我在围绕现有的本机 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 5

我不能总是让它与纱线链接一起工作。我发现特别有用的是yalc：

首先永远在全局安装一次：

npm install -g yalc

在本地库/包中（我称之为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以链接依赖项。（或运行-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。