Bundler 无法导入带有自定义扩展名的文本文件

问题描述

在一个 React Native 实验项目中，我试图加载一个长文本文件，以便在 React-Native-Webview 中使用它。

我称这个文件为 stockfish.src。所以我修改了 metro.config.js 文件：

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,inlineRequires: false,},resolver: {
        assetExts: ['wasm'],sourceExts: ['src'],}
    }),};

并尝试将其导入到我打算在 ReactNativeWebview 中使用它的组件中：

...
import { WebView } from 'react-native-webview';
import loadLocalResource from 'react-native-local-resource';
import stockfishSource from './stockfish.src';
...

但是 Metro bundler 仍然找不到 stockfish.src 文件：

None of these files exist:
  * components/StockfishEngine/stockfish.src(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * components/StockfishEngine/stockfish.src/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  2 | import { WebView } from 'react-native-webview';
  3 | import loadLocalResource from 'react-native-local-resource';
> 4 | import stockfishSource from './stockfish.src';
    |                              ^
  5 |
  6 | const StockfishComponent = () => {
  7 |

这是我的 package.json

{
  "name": "ChesspositionsOrganizer","version": "0.0.1","private": true,"scripts": {
    "android": "react-native run-android","ios": "react-native run-ios","start": "react-native start","test": "jest","lint": "eslint ."
  },"dependencies": {
    "react": "16.13.1","react-native": "0.63.4","react-native-local-resource": "^0.1.6","react-native-webview": "^11.2.3"
  },"devDependencies": {
    "@babel/core": "^7.12.16","@babel/runtime": "^7.12.13","@react-native-community/eslint-config": "^2.0.0","babel-jest": "^26.6.3","eslint": "^7.20.0","jest": "^26.6.3","metro-react-native-babel-preset": "^0.65.1","react-test-renderer": "16.13.1"
  },"jest": {
    "preset": "react-native"
  }
}

与此同时，文件夹是正确的 (components/StockfishEngine)。另外，我不能使用 *.js 因为我不想解释源代码，而且我想要比 *.txt 更有意义的东西。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

metro-bundler react-native