Javascript 从一个源构建多个react本机捆绑包

例如，我有一个带有一些特性的React本机应用程序。最完整的应用程序包含

新闻

产品

用户授权

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

假设免费只包含新闻。和Pro包含所有功能。我如何构建它，并且不包含我不需要的功能的导入

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

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

但您知道，模块import应该始终位于文件的顶部，不能被

if else

或其他任何东西包装。而且看起来一点也不好

有什么想法吗？或者这已经是目前普遍的做法了

---

谢谢大家!

一种方法是，您可以对第一次构建和运行project home dir中的bundle命令中不需要的代码段进行注释

通过取消对所需代码的注释来创建另一个bundle

---

干杯：）

一种方法是，您可以从project home dir中注释第一次生成并运行bundle命令时不需要的代码段

通过取消对所需代码的注释来创建另一个bundle

---

干杯：）

考虑到该应用程序是用Webpack构建的，通常它很简单，只需有单独的入口点，这些入口点包含与环境相关的模块（

产品

）和公共分母（其他所有内容）

import

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

let Products;

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

Webpack还支持（

ContextReplacementPlugin

也可以使用）：

---

考虑到该应用程序是用Webpack构建的，通常它很简单，只需有单独的入口点，这些入口点具有环境相关模块（

产品

）和公共分母（其他所有内容）的导入

import

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

let Products;

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

Webpack还支持（

ContextReplacementPlugin

也可以使用）：

---

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

另一种选择是在路由级别上进行，路由级别仍然包含if/else，并且可能需要组件级别上更大的架构挑战（具有相同组件的两个版本，一个pro，一个free），但好处是在单个文件中具有ENV依赖性

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

---

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

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

另一种选择是在路由级别上进行，路由级别仍然包含if/else，并且可能需要组件级别上更大的架构挑战（具有相同组件的两个版本，一个pro，一个free），但好处是在单个文件中具有ENV依赖性

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

---

我的方法是尽可能多地分解应用程序，尽量减少ifs的

数量，但在组件级别包含它们。
是的，如果您编写“Hello world”应用程序，这是一个不错的解决方案。但是对于大型项目，我想让它自动化。。因此，思考如何更好地做到这一点并不是问题的真正解决方案，它容易出错且不一致，如果你编写“Hello world”应用程序，这是一个很好的解决方案。但是对于大型项目，我想让它自动化。。因此，思考如何更好地做到这一点并不是问题的真正解决方案，它容易出错且不一致，但在您的解决方案中，proList和freeList将包含在内置包中？在网页包配置中没有任何更改是的，如果您真的不想这样做，您可以尝试使用网页包配置，将文件从不同的文件夹中打包，这将是第四种选择，但不确定这是否完全可行。我听说过“摇树”。我会试着这样挖。谢谢：）但在您的解决方案中，proList和freeList无论如何都将包含在内置捆绑包中？在不更改网页包配置的情况下是的，如果您确实不想这样做，可以尝试使用网页包配置，将文件从不同的文件夹拉到捆绑包中，这将是第四个选项，但我不确定这是否完全可能。我听说过“树摇晃”。我会试着这样挖。谢谢：）
import proList from 'list.pro';
import freeList from 'list.free';

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