Question

我正在构建一个可以让所有人都可以使用源代码的应用。根据最终系统将使用的内容（可以使用electron运行它并在C＃WebBrowserControl下），需要应用不同的全局变量名。

例如。

<--! This should not be applied to the end product if I don't specify that -->
<script>
    const electron = require('electron');
    const currentWindow = electron.remote.getCurrentWindow();
</script>
<!-- This is the end of the conditional statement -->

我还想在整个应用中将变量currentWindow上的名称更改为window。

我可以通过webpack插件/加载器或其他方式以某种方式执行此操作吗？

前一段时间我使用了similair插件grunt我在代码中有这些条件语句，具体取决于我使用grunt运行的命令。

Answer 1

有一个名为DefinePlugin的Webpack插件可以满足您的需求：https://webpack.js.org/plugins/define-plugin/

// webpack.config.js
const webpack = require('webpack');

module.exports = {

    ...

    plugins: [
        new webpack.DefinePlugin({
            HOST: 'electron' // or 'WebBrowserControl', etc.
        })
    ]

}

然后，您可以从应用程序代码中访问HOST作为全局变量：

if (HOST === 'electron') {
    const electron = require('electron');
    const currentWindow = electron.remote.getCurrentWindow();
} else if (HOST === 'WebBrowserControl') {
    // etc...
}

根据您启动Webpack构建的方式，您应该能够根据您正在进行的构建类型替换HOST中webpack.config.js的值。

带有webpack的条件变量名称

1 个答案: