是否可以创建一个仅编译为平台代码的 Electorn 应用程序？

Question

我将针对一个非常具体的用例来澄清我的问题。

假设我的代码设计如下：

这是内容：

src/inner/inner.darwin.ts：

export default function logger() {
    console.log('Darwin Logger');
}

src/inner/inner.windows.ts：

export default function logger() {
    console.log('Windows Logger');
}

src/inner/inner.ts：

注意导出默认值 - 这是强制性的

import LOGGER from '???????????';

export default class A {
    public static logger() {
         LOGGER();
    }
}

所以基本上，当我编译 Windows 代码时，我想导入代码inner.windows.ts。使用Mac时代码-inner.darwin.ts代码。

我确实知道我可以控制tsconfig.json. 因此，当我要创建 Windows 应用程序时，我将编写以下代码：

"exclude": ["**/*.darwin.ts"]

当我创建 Mac 时：

"exclude": ["**/*.windows.ts"]

然而，这并没有帮助解决进口问题。

我确实知道我可以运行依赖于底层平台的代码process.platform，但它不能完成这项工作。我希望输出的 Windows 应用程序尺寸更小 - 并忽略任何 Mac 代码。如果我使用它process.platform- Mac 代码仍然存在于底层 Windows 应用程序中。

有什么建议吗？

Webpack 能帮上忙吗？我愿意接受任何代码更改，只要代码定义良好并拆分即可，最终结果是我只有 Darwin 代码和 Windows 代码

Answer 1

所以解决方案非常简单。我所要做的就是使用 Webpack 插件。适合此任务的最佳插件是NormalModuleReplacementPluginWebpack 本身提供的开箱即用的插件。

exclude该解决方案中的 in不再tsconfig.ts合理。

只需提供以下插件：

new webpack.NormalModuleReplacementPlugin(
    /darwin/,
    function (resource) {
    resource.request = resource.request.replace(
        /darwin/,
        'windows',
    );
    }
),

darwin这将覆盖对文件的任何导入winodws。

现在，在开发过程中，这两个文件都存在 - 但在编译过程中 - 只有其中一个文件存在。

inner.ts简单地变成：

import LOGGER from './inner.darwin';

export default class A {
    public static logger() {
         LOGGER();
    }
}

当然，进入webpack.config.ts每个构建可能会很麻烦，因此我们绝对可以运行一些额外的 webpack 脚本来决定使用哪个底层构建，例如：

 const appTarget = env.APP_TARGET || 'darwin'; 

然后只需在插件中使用此变量，并运行提供APP_TARGET参数的 npm 构建脚本。