从一个来源

Question

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

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

我想要2个版本。喜欢＆＃34; 免费＆＃34;和＆＃34; 专家＆＃34;版本

让我们说免费只包含新闻。 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;

Answer 2

这实际上取决于你的应用程序的结构我认为，一种方法是在组件级别上进行（使用ifs）：

render() or constructor() {
...

  if(env === 'PRO') {
    ... unlock all the awesome features
  }
}

另一种选择是在路由级别上进行，它仍然包含if / elses并且可能需要在组件级别上具有更大的架构挑战（具有相同组件的两个版本，一个pro，一个免费），但是具有以下优点：单个文件中的ENV依赖

<Routes >
  <Route path="/list" component={env=='PRO'? ProList: FreeList}/>
</Routes>

另一种选择是将您的应用程序重组为两个代码库并根据构建进行导入，类似于特定于平台的代码，类似于以下内容：

文件：

list.pro.js

list.free.js

和index.js：

import proList from 'list.pro';
import freeList from 'list.free';

// Global var or store it somewhere
List = env === 'PRO'? proList : freeList;

我的方法是尽可能地分解应用程序，尽量减少ifs的数量，但将它们包含在组件级别。

Answer 3

一种方法是你可以评论第一次构建中不需要的那段代码并从project home目录运行bundle命令。

通过取消注释所需的代码来制作另一个包。

干杯:)