React Native 导入错误：无法使用 .bin 解析模块（如何导入某种类型的文件？）

Posted 2023-02-24

【中文标题】React Native 导入错误：无法使用 .bin 解析模块（如何导入某种类型的文件？）

【英文标题】：React Native importing error: unable to resolve module with .bin (how to import a certain type of file?)

【发布时间】：2020-06-28 03:14:04

【问题描述】：

我在运行 React Native 应用程序时收到错误消息。

Unable to resolve "./tfjs_model_to_use_quantized/content/tfjs_model_to_use/group1-shard1of1.bin" from "components\ImageInput.js"

我正在尝试在我的 JS 代码中导入一个名为 group1-shardof1.bin 的文件。

其他 require 函数（例如，对于 json 文件）工作正常，并且此特定 require 函数的文件路径是正确的。我认为问题在于 .bin 扩展名不支持在 react native 中导出 代码：

const modelWeights = require('./tfjs_model_to_use_quantized/content/tfjs_model_to_use/group1-shard1of1.bin')

我已经尝试过，我补充说：

"packagerOpts": 
      "assetExts": ["bin", "pb", "txt"]

在我的 app.json 中，带有 bin 扩展名。

如何配置我的 react-native 应用程序以将 .bin 文件扩展名导入 JS 文件？如果有人能帮助我解决这个问题，那就太好了。

【参考方案1】：

我找到了答案。 react native需要解析的其他文件类型可以在metro.config.js中配置：

const blacklist = require('metro-config/src/defaults/blacklist');
module.exports = 
  transformer: 
    getTransformOptions: async () => (
      transform: 
        experimentalImportSupport: false,
        inlineRequires: false,
      ,
    ),
  ,
  resolver: 
    // (add 'bin' to assetExts)
    assetExts: ['bin', 'txt', 'jpg', 'png', 'ttf'],
    sourceExts: ['js', 'json', 'ts', 'tsx', 'jsx'],
    blacklistRE: blacklist([/platform_node/])
  ,
;

关键部分是assetExts部分，将“bin”添加到列表中。在我的具体情况下，由于某种原因没有创建 metro.config.js 文件，但是我用上面的代码创建了一个新文件，并且 .bin 的导入工作正常。

【讨论】：

你拯救了我的一天。我有一个没有js异常的js文件！