javascript - 从一个来源构建多个 React Native 包

Question

例如，我有一些具有某些功能的 React Native 应用程序。最完整的应用包含

1. 新闻
2. 产品
3. 用户授权

我想要 2 个版本。喜欢“免费”和“专业”版本。

假设 Free 仅包含新闻。 Pro 包含所有功能。我如何构建它并且不包含我不需要的功能的导入。

在我的脑海里，我有这样的想法:

if (ENV === 'free') {
   import Products from 'products';
}

但是您知道，import 模块始终应该位于文件之上，并且不能被 if-else 或其他任何内容包裹。而且看起来一点也不好看。

有什么想法吗？或者，这可能已经成为普遍做法？

谢谢!

Answer 1

考虑到该应用程序是使用 Webpack 构建的，通常它就像具有单独的入口点一样简单，这些入口点具有环境相关模块(Product)和公分母(其他所有内容)的导入。

import 不能是有条件的，但底层模块化 API 可以。可以是

let Products;

if (ENV === 'pro') {
   Products = require('products').default;
} else {
   Products = null;
}

Webpack 还支持 dynamic requires (也可以使用 ContextReplacementPlugin):

Products = require(`./${ENV}/products`).default;