React Native 链接不在工程目录中的模块包

2023-09-14  本文已影响0人  JackZhangZzz

有时我们自己开发的 react-native 包并没有发布到 npm 仓库,即使发布了我们当然也希望能直接使用本地的,否则每次改一行代码都要重新发布安装实在太麻烦了。
使用本地包,我们可以简单地使用以下npm link命令来做到这一点:

cd /path/to/my-awesome-package 
npm link
cd /path/to/my-project 
npm link my-awesome-package

这样可以将包导入到您的项目中了。

const { someMethod } = require('my-awesome-package'); 
// ... 或
import { someMethod } from 'my-awesome-package';

如果是 React web、Electron 等项目时,这是正确的方法。但是,如果您需要将包链接到 React Native 项目,这是不行的,你会看到下面的错误:

错误:错误:无法从 /Users/mac/MyReactNativeApp/src/App.tsx 解析模块 my-awesome-package:在项目或这些目录中找不到 my-awesome-package:
node_modules
../.. /节点模块

在 React Native 中,并不支持符号链接 (https://github.com/facebook/metro/issues/1)。这是因为 Metro 捆绑器的工作方式。

修改Metro 配置解决:

Metro 为我们提供了一个选项来定位第三方依赖项(如果它们安装在项目文件夹之外的其他位置)。

打开metro.config.js位于 React Native 根项目文件夹中的 并确保它具有nodeModulesPathsproperty 内的属性resolver。参考下面的格式修改 (注意resolver,watchFolders 一个都不能少):

// 包所在文件夹,注意一定要用绝对目录
const packagePath =
    '/Users/mac/my-own-packages/my-awesome-package';

module.exports = {
    resolver: {
        nodeModulesPaths: [packagePath],
        // rest of metro resolver options...
    },
    watchFolders: [packagePath],
    // rest of metro options...
};

上一篇下一篇

猜你喜欢

热点阅读