您需要使用webpack(或其他打包工具)。当代码被打包后,它不会被执行,因此编译器无法知道应该遵循哪个逻辑分支(app_1还是app_2)。因此,您需要进入打包工具的逻辑以实现您的目标。然而,这并没有看起来那么可怕,因为webpack内置了这种能力(无需第三方...)。我建议您尝试使用webpack.providePlugin。
(https://webpack.js.org/plugins/provide-plugin)
或其同级 DefinePlugin
(https://webpack.js.org/plugins/define-plugin)
我害怕这些例子是我头脑中临时想出来的,所以第一次执行时很不可能成功。
例子:
两者都需要提供程序模块...
module.exports = {
live: '/path/to/live/image',
dev: '/path/to/dev/image'
}
提供插件示例
new webpack.ProvidePlugin({
imagePath: [
'path/provider',
process.env.ENVIRONMENT
]
}),
export default function Test() {
return (
<img src={imagePath} alt="" />
);
}
定义插件示例:
new webpack.DefinePlugin({
'process.env.ENVIRONMENT': JSON.stringify(process.env.ENVIRONMENT)
});
var providers = require('path/provider');
export default function Test() {
return (
<img src={providers[process.env.ENVIRONMENT]} alt="" />
);
}
在这两种情况下,捆绑器被迫在编译时将您的变量折叠为实际文字值 - 在捆绑之前。由于现在您已将逻辑路径折叠为单个选项,因此它现在可以自由地仅捆绑相关资产。