使用 webpack 而不是 Metro 构建 React Native 应用程序

Question

我的 React Native 应用程序是 monorepo 的一部分。所有“可构建内容”（api、后端、网站）都是用 TypeScript 编写并使用 Webpack 构建的。

他们都使用了 inversify。因此，使装饰器工作的配置在 Webpack 和 Metro/Babel 配置中都是重复的。另外，有些东西的工作方式不一样，需要额外的 babel 插件。

我已经检查了几乎所有地方，但没有找到答案：

具体是什么阻止我们使用 Webpack 构建 RN 应用并彻底摆脱 Metro/Babel ？ （除了HMR等开发工具）

Answer 1

您检查过重新包装吗？如果我正确理解你的问题，它可能会对你有帮助https://github.com/callstack/repack

Answer 2

我最终将构建过程分为两部分：

1. Webpack 获取我的

   index.tsx

   并通过以下方式构建

   index.js

   ts-loader

   （使用

   node

   目标）
2. Metro 以此

   index.js

   作为入口点

由于它已经被转译，因此无需为 Metro 定义复杂的机制来构建 TypeScript 👌🏽。也不需要任何 babel 插件。简单多了。

这是一个额外的步骤，但至少，我有一个中央 Webpack 配置来转译 TS，最重要的是，我确信它对于我的所有目标（尤其是装饰器部分）都以相同的方式转译。

2024-07-26 更新： 事实证明这是一个“坏”主意，因为它破坏了 Metro 处理的资产机制。因此，我不得不转回让 Metro/Babel 进行转译。