react-native - 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/我可以看到 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:../.。example/它以这种方式工作正常，但在我编辑我的按钮后更新依赖并不容易。

score 63 · Accepted Answer

该npm link命令不起作用，因为 React Native 打包器不支持 symlinks。

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

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

我发现Haul非常适合这个用例，甚至设置了一个包含storybook的小型启动项目，如果您有许多组件要在它们之间切换，这真的很有帮助。

score 47 · Accepted Answer

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

score 8 · Accepted Answer

我不能总是让它与纱线链接一起工作。我发现额外有用的是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。

score 8 · Accepted Answer

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

这会生成一个 gzipped tarball：

react-native-actualmodulename-1.0.0.tgz

现在在您的应用程序中安装它：

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

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

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

score 4 · Accepted Answer

遇到同样的问题。虽然我无法正常npm link工作，但我通过在项目文件夹中安装本地包来解决它

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

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

score 2 · Accepted Answer

2

更改您的 package.json

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

于 2017-05-19T06:45:39.873 回答

score 0 · Accepted Answer

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

score 0 · Accepted Answer

我遇到了同样的问题。

我尝试使用安装本地模块npm，并一直遇到无法解析模块的问题，即使我可以看到 node_modules 中的文件夹以及类和方法名称的自动完成工作。

我能够通过安装本地库来绕过它，yarn而不是在 github 上npm看到这个未解决的问题之后。问题于 2020 年 9 月开放，目前 Facebook 尚未发表评论。

score -3 · Accepted Answer

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

yarn --version
1.21.1

npm --version
6.13.4

cd my-button
yarn install or npm install

在我的按钮中注册链接

yarn link or npm link

安装示例项目

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

链接到我的按钮

yarn link my-button or npm link my-button

完成 pod 安装（如有必要）

cd ios
pod install

score -6 · Accepted Answer

尝试运行

npm run watch

在按钮包里面。目前，我正在使用它将库中的更改应用到我的主项目。请让我知道它是否有效！

react-native - React Native：npm链接本地依赖，无法解析模块

10 回答 10

Related

Reference