从一个源构建多个 react 本机bundle

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

我想要 2 个版本。比如"免费"和"专业"版本。

假设免费仅包含新闻。和专业版包含所有功能。我如何构建它并且不包括我不需要的功能导入。

在我的脑海里，我有这样的东西：

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

但是您知道，模块导入始终应该位于文件顶部，不能被if-else或其他任何东西包装。而且看起来一点也不好。

那么有什么想法吗？或者也许它已经是这样做的常见做法？

谢谢！

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

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

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

Webpack 还支持动态require s（ContextReplacementPlugin也可以使用）：

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

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

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

另一种选择是在路由级别执行此操作，它仍然包含 if/elses，并且可能需要在组件级别上面临更大的架构挑战（具有相同组件的 2 个版本，一个专业版，一个免费），但好处是在单个文件中具有 ENV 依赖项

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

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

文件：

list.pro.js

list.free.js

在索引上.js：

import proList from 'list.pro';
import freeList from 'list.free';
// Global var or store it somewhere
List = env === 'PRO'? proList : freeList;

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

一种方法是您可以注释该段代码，该代码在项目主页目录中首次构建和运行捆绑命令中不需要。

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

干杯:)

相关内容