问题标签 [metro-bundler]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
5466 浏览

react-native - 错误:ENOENT:没有这样的文件或目录,打开 'android\app\src\main\assets\index.android.bundle'

我创建了 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'

0 投票
1 回答
240 浏览

reactjs - React Native Metro 捆绑器选择要导入的文件。如何做出行为就像 Webpack 解析器 mainFiles

在 React-Native 中,我们可以导入依赖于平台的文件。 https://facebook.github.io/react-native/docs/platform-specific-code#platform-specific-extensions

平台指定的按钮将被导入。

所以!

WebPack 允许如何使用 mainFiles 解析器扩展此行为

例子:

看起来 Metro bundler 已经有了这些选项,但我不明白如何通过 react-native-cli 传递选项。我应该尝试在没有 cli 的情况下自己运行 bundler 吗?

0 投票
0 回答
723 浏览

javascript - 在 react native 中使用 reanimated 重新加载的问题

我一直在使用 reanimated 在我们的应用程序中实现一些不错的 60fps 动画。

我在 0.60.3 上使用 react Native,所以我使用快速刷新功能。

我有一个问题,如果我编写任何包含 reanimated 的内容,因此在 UI 线程而不是 js 上执行,重新加载不起作用,无论是快速刷新还是完全重新加载应用程序。一个完整的,停止应用程序并再次构建它可以让它工作。

这是发生的事情:

假设我正在尝试为 Animated.View 的 translateY 设置动画。我编写了代码,它可以工作。如果我对代码中的任何内容进行更改(即使只是再次保存代码而不更改任何内容),动画将完全停止工作。如果我将我的 Animated.View 交换为普通视图,保存,重新加载,将其更改回 Animated.View,再次保存重新加载它会再次工作,直到我对重新激活的代码进行更改。正常的 JS 更改虽然有效。

无论我是在模拟器中还是在设备上,它对 iOS 和 Android 都是一样的。

我试图找出可能导致这种情况的原因。我假设正在发生的事情是 Metro 更新了 JS 代码,但是“过桥”的所有内容都没有得到更新。

但这应该怪谁呢?是 Metro、Node、React Native 还是别的什么?任何回应表示赞赏,这让我发疯。

0 投票
0 回答
71 浏览

ios - React native Migration to 61:Metro bundler 在 ios 设备上启动但未运行

我试图了解 Metro Bundler 是如何工作的。在迁移到 61 时,我遇到了在 IOS 上没有启动打包程序的问题,在手动将启动打包程序脚本作为构建阶段添加到 Xcode 之后,metro 打包程序同时适用于模拟器和设备,但带有百分比的绿线仅在以下情况下运行在设备上安装应用程序时在模拟器上安装应用程序,它在“加载依赖关系图完成”之后是堆栈,但是应用程序已正确安装在设备上并正在运行。请帮助我了解设备和模拟器上的构建过程有什么区别。谢谢

0 投票
0 回答
139 浏览

react-native - Intellij React Native node_modules 依赖断点未命中

我正在使用 expo 裸工作流(unimodules),我想通过使用react-navigation-stack位于node_modules.

对于编码和调试,我使用 Intellij。我没有选中Do not step into library scriptsDo not step into scripts。我还添加react-navigation-stack了一个库。

问题是我的断点react-navigation-stack被忽略(它们没有复选标记),但rn_range_slider被正常命中(它们有复选标记)。

任何人都可以帮忙吗?

Idea1:这可能与 Metro 的源地图有关。我不知道 expo 如何使用 Metro 配置以及如何覆盖它。

编辑:

我从react native debugger添加了一张照片,它接缝 Metro 负载lib/module目标构建,并且断点工作 在此处输入图像描述

IntelliJ开始,lib/module断点可以工作,但src/(打字稿)不行在此处输入图像描述

0 投票
1 回答
179 浏览

react-native - Metro bundler 在错误的地方寻找 react-native 入口点

如果我运行"start": "node node_modules/react-native/local-cli/cli.js start",然后react-native run-ios模拟器启动就好了,并且捆绑器为 js 提供服务。但是,react-native 很聪明,如果没有服务器打开并且我运行命令,它可以自动启动 Metro 捆绑器react-native run-ios。但是,当它自动打开时,它会写一行说它正在寻找 .js 中的 JS 文件/Users/.../sc/projectDir/node_modules/react-native。这在我升级到react-native 59.0. 我们的管道依赖于捆绑器的自动生成以进行集成测试。有没有人遇到过这个问题并找到了解决方案。

0 投票
2 回答
1778 浏览

javascript - 如何在 Metro 中获取 React Native 变体?

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

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

在构建应用程序时,我知道我要为哪个客户端执行此操作,方法是指定一个 Android 构建变体,例如:

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

我想到了以下几点:我修改了打包程序,以便它去掉与当前构建变体不对应的键。

我现在有一个用于 Metro 的转换器插件,它执行以下操作:

但是我怎么知道正在使用哪个构建变体?

如果这看起来像是一个 XY 问题,我很乐意探索动态构建配置的替代方案。但是,我不能使用环境变量,因为配置太复杂而不能仅是.env键列表。

0 投票
1 回答
2582 浏览

xcode - React Native:xcode 在设备上构建成功,但未连接到 Metro Builder

反应原生 0.61

我试图找出我在 XCode 或我的 iPhone 中破坏了某些东西的地方。几天前一切正常 - 我按下运行 -> 构建成功 -> 一切都通过 wifi 工作(热重载)。

但是今天当我按下运行时 - 构建成功但它没有启动应用程序。重复运行后,一个应用程序正在启动,但没有连接到 Metro Builder。

我尝试在另一个办公室使用相同的组合。那里一切正常。

任何 Android 设备上的应用程序正在完美启动并连接到 Metro Builder。所有模拟器(包括通过 XCode)都运行良好。相同的无线网络。

XCode 中的输出:

我什至尝试只使用一个新项目进行测试 - react-native init,我遇到了同样的问题。

我应该在哪里检查?

0 投票
2 回答
1594 浏览

javascript - babel 在 react native 中做了什么?

我试图弄清楚 react native 的构建过程以及 Metro bundler 和 babeljs 到底是做什么的。特别是什么允许我使用 ES5+ 语法。我正在寻找一些似乎告诉我一些不同的消息来源。这个消息来源说:

Metro 将所有 javascript 代码合并到一个文件中,并翻译任何设备无法理解的 Javascript 代码(如 JSX 或一些更新的 javascript 语法)

这个说:

React Native 使用 Babel 将 React 语法和较新的 ES5+ 语法转换为可以在不支持这些功能的 JavaScript 环境中运行的代码。

所以现在我很困惑两者到底是做什么的。我也在上述来源(和地铁文档)中找到了这一点: Metro。转换过程描述为:

所有模块都经过变压器。转换器负责将模块转换为目标平台可以理解的格式(例如 React Native)。模块的转换根据您拥有的内核数量并行发生。

这听起来就像 babel 应该对我做的翻译,或者这是不同的东西?Appart 从那我很困惑捆绑过程的解决部分的工作原理以及它与其他步骤并行的确切工作原理,但也许这是另一个问题的主题。

0 投票
1 回答
873 浏览

javascript - 世博会如何分发包裹?(.web.js、.js 配置)

我想为博览会分发一个包。这个包是在 expo SDK36 中构建我的应用程序时创建的。

像许多 expo 依赖项一样,我大量使用.ios.js,.android.js.web.js扩展。

在导入我在 npm 上分发的源时,解析器只导入.js,没有任何区别。

作为一个例子,这个包应该与 expo 一起使用:

图片

这是已@expo/webpack-config解决的扩展:

但事实并非如此,我必须通过在源代码中添加后缀来手动导入.web.

我如何配置expo或我的分布式包以便能够在导入源时为每个环境导入正确的源node_modules

编辑

我期望我的扩展与我的main领域一起工作是错误的package.json,我已经重新配置了我的回购:

问题 :

  1. 我已经使用.native.js了,所以我的 reactjs 用户(不仅是 expo 和 react-native 用户)将.js默认导入文件
  2. 由于(1),其他响应用户(既不是 react-native 也不是 expo)不需要某种额外的配置来支持 react-native扩展.web.js.ios.js.android.is和。.native.js.js
  3. 如果我确实更喜欢(1),我的 react 用户将无法像(2).web.js那样做,在这种情况下:他们在项目中配置 react-native 扩展的方式是什么?
  4. 对于所有 react-native 用户,我可以知道在本地项目中可以配置扩展的位置吗?(我相信可以在 webpack 中配置 web 项目config.resolve.extensions