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

Question

我正在为 React Native 开发一个按钮 ui package。 我尝试构建一个示例项目来测试这个按钮。 目录结构如下：

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 也可以在我的按钮 package 中自动完成 function。

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

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 打包器不支持 symlinks 。

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

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

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

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

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

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

这会生成一个 gzipped tarball：

react-native-actualmodulename-1.0.0.tgz

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

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

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

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

Answer 5

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

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

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

Answer 6

更改您的 package.json

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

Answer 7

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

Answer 8

我遇到了同样的问题。

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

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

Answer 9

这对我有用：

第1步去包装：

npm link packageNameHere

这会将这个包链接到全局 node_module

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

npm link pathToPackageDirectory
npm install pathToPackageDirectory

例如：npm 链接 ~/myDemoPackage

这会将全局 node_moudle 链接到该项目

如果要将包导入文件，请使用 FILE PATH INSTEAD OF PACKAGE NAME ！

前任：

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

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

如果你使用'@aliciaForDemo/stripe-api-helper'，它会失败。

Answer 10

我也遇到过这个问题。 访问下面的链接后，我知道 react-native 不支持符号链接。[点击这里][1]

但是，我通过在 metro.config.js 文件中添加这些行来解决这个问题。 请将your_module_name替换为您的模块名称。

const path = require('path');

const thirdPartyPath = path.resolve(__dirname + '/../your_module_name/');  // Path of your local module

const thirdParty= {
  'your_module_name': thirdPartyPath,
  };

const watchFolders = [ thirdPartyPath];

module.exports = {
// existing dependencies
resolver: {
  thirdParty,
  },
  watchFolders
};

Answer 11

使用任何其他建议永远无法让我自己的环境工作，但发现了一个效果很好（虽然不理想）的 hack，只需几行代码即可轻松设置，而无需更改 RN 项目配置。

在您正在处理库的目录中递归使用fs.watch进行更改，并在发生更改时复制更新：

import fs from 'fs'

const srcDir = `./your-library-directory`
const destDir = `../your-destination-directory`

fs.watch("./src/", {recursive: true}, () => {
  console.log('copying...')
  fs.cp(srcDir, destDir, { overwrite: true, recursive: true }, function() {
    console.log('copied')
  })
})

Answer 12

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

yarn --version
1.21.1

npm --version
6.13.4

1. 安装在项目根目录

cd my-button
yarn install or npm install

2. 在我的按钮中注册链接

yarn link or npm link

3. 安装示例项目

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

4. 链接到我的按钮

yarn link my-button or npm link my-button

5. 完成 pod 安装（如有必要）

cd ios
pod install

Answer 13

尝试运行

npm run watch

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