例如，我有一些具有某些功能的 React Native 应用程序。最完整的应用包含
我想要 2 个版本。像“free”和“pro”版本。
假设 免费 仅包含新闻。 Pro 包含所有功能。我如何构建它并且不包含我不需要的功能的导入。
在我的脑海中，我有类似的东西：
if (ENV === 'free') {
import Products from 'products';
}
但是您知道，该模块 import 始终应该位于文件顶部，并且不能被 if-else 或其他任何东西包裹。而且看起来一点也不好看。
所以有什么想法吗？或者，它可能已经是这样做的常见做法？
谢谢！
【问题讨论】：
标签： javascript node.js build react-native ecmascript-6
一种方法是您可以注释在第一次构建时不需要的代码段，并从项目主目录运行 bundle 命令。
通过取消注释所需的代码来制作另一个捆绑包。
干杯:)
【讨论】：
考虑到应用程序是使用 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;
【讨论】：
我认为这实际上取决于您的应用程序的结构，一种方法是在组件级别（使用 ifs）：
render() or constructor() {
...
if(env === 'PRO') {
... unlock all the awesome features
}
}
另一种选择是在路由级别执行此操作，它仍然包含 if/else，并且可能需要在组件级别上面临更大的架构挑战（具有相同组件的 2 个版本，一个专业版，一个免费版），但好处是拥有单个文件中的 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 的数量，但将它们包含在组件级别。
【讨论】：