使用 webpack 而不是 metro 构建 React Native 应用程序
Build React Native app with webpack instead of metro
我的 React Native 应用程序是 monorepo 的一部分。所有“可构建的”(api、后端、网站)都是用 TypeScript 编写并使用 Webpack 构建的。
他们都用了inversify。因此,使装饰器工作的配置在 Webpack 和 Metro/Babel 配置中有点重复。另外,有些东西无法正常工作,需要额外的 babel plugins.
我几乎到处检查但没有找到答案:
具体是什么阻止我们使用 Webpack 构建 RN 应用程序并完全摆脱 Metro/Babel? (HMR 等开发工具除外)
你检查过重新包装了吗?如果我正确理解你的问题,它可能会对你有所帮助 https://github.com/callstack/repack
我最终将构建过程分为两部分:
- Webpack 使用我的
index.tsx
并构建一个 index.js
通过
ts-loader
(使用 node
目标)
- Metro 以此
index.js
作为入口点
由于已经转译,因此无需为 Metro 定义复杂的机制来构建 TypeScript。也不需要任何 babel 插件。简单多了。
这是一个额外的步骤,但至少,我有一个中央 Webpack 配置来转译 TS,最重要的是,我确信它以相同的方式转译我的所有目标(尤其是装饰器部分)。
我的 React Native 应用程序是 monorepo 的一部分。所有“可构建的”(api、后端、网站)都是用 TypeScript 编写并使用 Webpack 构建的。
他们都用了inversify。因此,使装饰器工作的配置在 Webpack 和 Metro/Babel 配置中有点重复。另外,有些东西无法正常工作,需要额外的 babel plugins.
我几乎到处检查但没有找到答案:
具体是什么阻止我们使用 Webpack 构建 RN 应用程序并完全摆脱 Metro/Babel? (HMR 等开发工具除外)
你检查过重新包装了吗?如果我正确理解你的问题,它可能会对你有所帮助 https://github.com/callstack/repack
我最终将构建过程分为两部分:
- Webpack 使用我的
index.tsx
并构建一个index.js
通过ts-loader
(使用node
目标) - Metro 以此
index.js
作为入口点
由于已经转译,因此无需为 Metro 定义复杂的机制来构建 TypeScript。也不需要任何 babel 插件。简单多了。
这是一个额外的步骤,但至少,我有一个中央 Webpack 配置来转译 TS,最重要的是,我确信它以相同的方式转译我的所有目标(尤其是装饰器部分)。