从一个来源构build多个反应原生包

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

我想有2个版本。像“ 免费 ”和“ 专业版”。

假设Free包含News。和Pro包含所有function。我如何构build它，不包括我不需要的function导入。

在我看来，我有这样的东西：

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

但是你知道，这个模块导入总是应该在文件之上，不能被if-else或其他任何东西包装。而且看起来不是很好。

那么有什么想法？或者也许现在已经有这样做的习惯了？

谢谢！

考虑到应用程序是使用Webpack构build的，通常它具有单独的入口点，这些入口点具有环境相关模块（ Product ）和公分母（其他所有内容）的导入。

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

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

Webpack也支持dynamic的require （ContextReplacementPlugin也可能被使用）：

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

我build议你避免这些if语句遍布你的原生应用程序。

您可以创build一个基础文件夹，并以与特定于平台的代码相似的方式，根据您的环境在index.js导出自由或专业文件。

这真的取决于你的应用程序是如何构build的我认为，一种方法是在组件级别上（使用ifs）：

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

另一个select是在路由级别上进行，它仍然包含if / elses，并且可能需要在组件级别上具有更大的体系结构挑战（具有相同组件的两个版本，一个专业版，一个免费版），但是具有ENV依赖性在一个文件中

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

另一个select是将应用程序重构为两个代码库并根据构build导入它们，类似于特定于平台的代码，这些代码大致如下：

文件：

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;

我的方法是尽可能分解应用程序，尽量减lessifs的数量，但将其包括在组件级别。

一种方法是你可以评论那首不需要的代码，然后从项目的home目录运行bundle命令。

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

干杯:)