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

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

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

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

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

我发现Haul非常适合这个用例，甚至可以设置一个little starter project，其中还包含storybook，如果你有很多组件需要切换，这真的很有帮助

Answer 3

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

NativeModules

只要我通过import { NativeModules } from 'react-native';引用模块，此方法就起作用。导入它：

ActualModuleName

然后像这样访问名为NativeModules.ActualModuleName的模块：

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

但是当我尝试通过名称导入模块时，它会失败：

npm pack

要完成该工作，我必须先包装包装。在包的根目录中运行此命令：

react-native-actualmodulename-1.0.0.tgz

这会生成一个压缩的tarball：

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

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

node_modules

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

但是好处是，您的应用程序源可以导入npm，就像通过const data = { time: ["(2020-01-08T20:00:03.492Z)"], vulnerabilitiesCount: [1, 2] } let timesArray = []; for(let i = 0; i < data.time.length; i++) { let formTime = data.time[i].replace("(", ""); formTime = formTime.replace(")", ""); let parsedTime = new Date(formTime); let month = parsedTime.getMonth()+1; if(month < 10) { month = "0" + month; } let timeFormatted = parsedTime.getFullYear() + "-" + month + "-" + parsedTime.getDate(); let fullTime = { time: "", vulnerabilitiesCount: 0 } if(timesArray.find(t => t.time == parsedTime)) { continue; } fullTime.time = timeFormatted; if(data.vulnerabilitiesCount[i] > 0) fullTime.vulnerabilitiesCount = data.vulnerabilitiesCount[i]; timesArray.push(fullTime) }发布应用程序一样。不需要特定于环境的代码。

Answer 4

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

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

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

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来链接依赖关系。（或run-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 6

对于仍在寻找没有其他依赖性的简单解决方案的人，请尝试以下方法：

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

Answer 7

我遇到了同样的问题。

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

在 github 上看到这个打开的 issue 后，我能够通过使用 yarn 而不是 npm 安装本地库来绕过它。问题已于 2020 年 9 月开放，但 Facebook 尚未对此发表评论。

Answer 8

更改你的package.json

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

Answer 9

尝试运行

npm run watch

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

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

9 个答案: