标签: metro-bundler

我正在尝试使用 Metro 为我的本机项目添加多个解析器和转换器，如何将它们组合到我的 Metro.config.js 文件中？

背景：我想让 sass 转换器和 svg 转换器都能工作。

我已经分别尝试了这些配置，这似乎有效，但我对如何将它们组合在一起使它们同时工作感到困惑。我假设它们需要在同一个 module.exports 中，因为当它们都在同一个文件中时，我的 svg 会出错

这些是我试图结合的配置：

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

module.exports = (async () => {
  const {
    resolver: { sourceExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-sass-transformer")
    },
    resolver: {
      sourceExts: …

尝试通过 xcode (IOS) 和 Metrobundler 运行应用程序，我收到此错误

error: bundling failed: Error: Unable to resolve module `@babel/runtime/helpers/interopRequireDefault` from `<rootDir>/index.js`: Module `@babel/runtime/helpers/interopRequireDefault` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\n  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.\n    at ModuleResolver.resolveDependency (<rootDir>/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:183:15)\n    at ResolutionRequest.resolveDependency (<rootDir>/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)\n …

我仔细阅读了中等文章：React Native 0.63 Monorepo 演练，以获取与 react-native 一起使用的纱线工作区。Everhtings 可以工作，我可以构建我的 iOS 和 Android 应用程序，Metro Bundler 也可以工作，但是当我使用yarn workspace mobile ios

RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks

除非我在纱线工作区中使用 react-native，否则我不会收到此警告。因此，我怀疑错误是由我的 monorepo 设置产生的。

您知道如何删除此警告吗？

我正在开发 React Native 应用程序，其中包含针对不同可能客户端的不同配置，例如src/config/config.js. 这些配置相当复杂。该文件的结构基于客户端名称作为键，值作为对象条目，例如：

export default {
  fooClient: {
    apiUrl: "https://foo.example.com/",
  barClient: {
    apiUrl: "https://bar.example.com/"
  }
}

当然，还有很多其他选项键。

构建应用程序时，我通过指定 Android 构建变体知道要为哪个客户端执行此操作，例如：

ENVFILE=.env npx react-native run-android --variant fooDebug --appIdSuffix foo

出于安全原因，我不希望其他客户端的密钥包含在配置文件中。在构建应用程序并将其发送给客户端之前，我可以选择哪些选项来从此文件中删除所有其他客户端配置？

我考虑了以下内容：我修改了打包程序，以便它删除与当前构建变体不对应的键。

我现在有一个 Metro 变压器插件，可以执行以下操作：

const upstreamTransformer = require('metro-react-native-babel-transformer');

module.exports.transform = function(src, filename, options) {
  if (typeof src === 'object') {
    // handle RN >= 0.46
    ({ src, filename, options } = src);
  }

  if (filename.endsWith('config.js')) {
    console.log('Transforming ' + filename);
    let srcStripped = src.replace(';', '').replace('export default …

• 我需要将特定的 javascript 文件导入到组件中。
• javascript的内容是代码，但需要转换成字符串
• 我无法在运行时转换它
• 文件的内容需要注入到 Web 视图中，因此它处理类似 的对象window，因此目前，当代码被解释时，它会在导入时抛出错误

我感谢您的帮助！

当在真实的 iPhone 设备而不是模拟器上运行debug方案时，我注意到 Metrobundler 不会被触发加载 JS 更改。

我可以摇动设备，然后会弹出重新加载、外部调试等选项。但每当我选择任何选项时，应用程序都会冻结，然后在几秒钟或几分钟后显示以下错误

[RCTCxxBridge.mm:1080] Timed out waiting for modules to be invalidated\n

造成这种情况最可能的原因是什么？我似乎找不到其他人有同样的问题。

我的环境：

REACT: "16.8.3"\nREACT-NATIVE: "0.59.2"\nNPM: 6.9.0\nNODE: v10.16.0\n\n

即使在摇晃后尝试执行任何选项后，这也是 Metrobundler 所在的位置。

> ReactNativePlatform@0.0.1 start /Users/joselitonarte/Documents/Fun/RN/myapp\n> node node_modules/react-native/local-cli/cli.js start "--reset-cache"\n\n\xe2\x94\x8c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x90\n\xe2\x94\x82                                                                              \xe2\x94\x82\n\xe2\x94\x82  Running Metro Bundler on port 8081.                                         \xe2\x94\x82\n\xe2\x94\x82                                                                              \xe2\x94\x82\n\xe2\x94\x82  Keep Metro running while developing on any JS projects. Feel free to        \xe2\x94\x82\n\xe2\x94\x82  close this tab and run your own Metro instance if you prefer.               \xe2\x94\x82\n\xe2\x94\x82                                                                              \xe2\x94\x82\n\xe2\x94\x82 …

如何在一台机器上运行 Metro bundler 或 react-native 应用程序的多个实例？react-native 应用程序运行的默认端口是 8081。

我创建了 react-native init 项目

然后我使用 react-native run-android 运行该项目，它将毫无问题地运行。

当我尝试使用以下评论构建 apk 时

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src /主要/资源

我正面临这个错误

错误ENOENT：没有这样的文件或目录，打开'android\app\src\main\assets\index.android.bundle'。使用 --verbose 标志运行 CLI 以获取更多详细信息。错误：ENOENT：没有那个文件或目录，打开'android\app\src\main\asset\index.android.bundle'

我是 React Native 的新手，在运行命令 npm react-native run-android 时遇到这个问题，它总是启动模拟器，即使我的 Android 设备已连接并在运行命令时显示在 adb 设备列表中adb devices。

我的环境：
操作系统：Windows 10
NPM：6.14.4
节点：v10.21.0

我正在尝试在 android 上构建我的应用程序的调试版本。离线版本工作正常。（与react-native bundle ...）。但当然，它不会触发 Metro bundler。此外，捆绑器正在侦听构建，当在浏览器上调用https://localhost:8081/index.bundle?platform=android 时，它开始捆绑。我试过了：

1. 删除build文件夹
2. 产生新的 debug.keystore
3. 跑步 ./gradlew clean
4. watchman watch-del-all
5. rm -rf .gradle
6. rm -rf node_modules
7. rm -rf package-lock.json
8. npm i
9. 运行 npx react-native run-android

以及几乎所有类型的清洁和重置。但是还是没有机会。这是一个高度定制的项目，我无法更新 react-native 版本或清理 android 文件夹。

这是我的react-native info结果：

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 417.64 MB / 8.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.14.1 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: …

问题：这几天之间没有发生任何变化。即使我npx react-native start在运行时运行了 Metro npx react-native run-android，它也会启动它自己的 Metro 服务器，并且不允许我进行“快速刷新”，它基本上会将应用程序的调试版本安装到设备上。我需要它来快速刷新以用于开发目的。已经尝试了有关问题的步骤：Unable to load script from assets index.android.bundle on windows

为了测试和调试我的react-native项目的android构建，我有一个在一个Powershell窗口中运行的模拟器，将在第二个Powershell窗口中启动metro服务器，npx react-native start然后使用它在第三个powershell窗口中运行应用程序，npx react-native run-android它将完成构建并安装应用程序，然后它将应用程序“传递”到react-native Metro服务器，然后将其安装到模拟器。这将允许我更改代码并“快速刷新”模拟器/手机中的应用程序，并将日志输出到 Metro 服务器。

版本（在项目根文件夹中执行）

npx react-native --version：6.0.0

npx --version：7.18.1

设置：

第一个 Powershell 窗口： emulator -avd Galaxy_Nexus_Android9 -no-snapshot

第二个 Powershell 窗口：确保 abd 设备正在运行

adb devices

结果

List of devices attached
emulator-5554   device

跑步 npx react-native start

结果：Metro JS 服务器启动

第三个 Powershell 窗口运行：npx react-native run-android

结果：运行Android

我将它启动自己的 …

我通常运行 expo start 或 expo start -c ，浏览器将在 localhost:19000 自动打开，其中包含显示二维码、连接：隧道、局域网、本地的 Metro 捆绑程序详细信息，当然还有 exp：应用程序的地址。

突然，当我运行 expo start 时，浏览器不再打开。当我导航到 localhost:19000 时，它显示一个 json 转储：

{"name":"litplans","slug":"litplans","version":"1.0.0","orientation":"portrait","icon":"./assets/icon.png","userInterfaceStyle":"light","splash":{"image":"./assets/splash.png","resizeMode":"contain","backgroundColor":"#ffffff","imageUrl":"http://127.0.0.1:19000/assets/./assets/splash.png"},"updates":{"fallbackToCacheTimeout":0},"assetBundlePatterns":["**/*"],"ios":{"supportsTablet":true,"bundleIdentifier":"com.mallsecinc.litplans"},"android":{"adaptiveIcon":{"foregroundImage":"./assets/adaptive-icon.png","backgroundColor":"#FFFFFF","foregroundImageUrl":"http://127.0.0.1:19000/assets/./assets/adaptive-icon.png"}},"web":{"favicon":"./assets/favicon.png"},"_internal":{"isDebug":false,"projectRoot":"C:\\sites\\apps\\litplans","dynamicConfigPath":null,"staticConfigPath":"C:\\sites\\apps\\litplans\\app.json","packageJsonPath":"C:\\sites\\apps\\litplans\\package.json"},"sdkVersion":"45.0.0","platforms":["ios","android","web"],"developer":{"tool":"expo-cli","projectRoot":"C:\\sites\\apps\\litplans"},"packagerOpts":{"scheme":null,"hostType":"lan","lanType":"ip","devClient":false,"dev":true,"minify":false,"urlRandomness":"2x-kif","https":false},"mainModuleName":"node_modules\\expo\\AppEntry","__flipperHack":"React Native packager is running","debuggerHost":"127.0.0.1:19000","logUrl":"http://127.0.0.1:19000/logs","hostUri":"127.0.0.1:19000","bundleUrl":"http://127.0.0.1:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false","iconUrl":"http://127.0.0.1:19000/assets/./assets/icon.png"}

我做的唯一不同的是卸载并安装node.js。

为了解决问题，我做了以下操作：

• 尝试运行现有的世博会项目。
• 项目清单
• 启动全新的世博项目。
• 删除node_modules并重新安装
• 删除expo模块并重新安装

我正在使用 RN 0.69.2 版本。昨天我已经将其升级到RN 0.70版本。我遵循了 React Native Helper 中的指南。但我在 Metor 中遇到错误，它说无法解析模块“./app.json”。当我尝试 npm start --reset-cache 时，我收到其他错误，其中显示 References Error sha-1 。

我尝试了 stackoverflow 中的所有解决方案，但错误没有解决。