Question

我有一个用TypeScript编写的基于电子的应用程序。要捆绑代码，我在我的gulpfile中运行webpack，当然可以定位Electron或浏览器。相应的配置如下：

const appCompile = gulp.src(`${sourceFolder}/Typescript/Main.ts`)
    .pipe(webpackStream({
        module: {
            rules: [
                {
                    loaders: ["babel-loader", "ts-loader"],
                    exclude: [/node_modules/]
                },
            ]
        },
        resolve: {
            modules: ["Source/Typescript", "node_modules"],
            extensions: [".tsx", ".ts", ".js"]
        },
        output: {
            filename: "Bundle.js"
        },
        mode: buildConfiguration.isDevelopment ? "development" : "production",
        externals: externals,
        target: targetPlatform.isWeb ? "web" : "electron-renderer",
        devtool: buildConfiguration.isDevelopment ? "source-map" : "none"
    }, webpack))
    .pipe(gulp.dest(paths.scripts.dest));

目前我有一些代码行只能在开发模式下执行，在Electrons渲染器（不是主！）进程中本地运行（因为它包含一些低级fs代码）。在运行webpack为Web部署时，有没有办法防止发出这些行/调用？类似于if (isElectron) { doSomethingLocally(); }等语句的全局常量。

编辑：特别是像import * as fs from "fs";这样的导入错误，因为在打包而不是Electron时会出现错误。即使我可以使用像const isElectron = navigator.userAgent.indexOf("Electron") !== -1;这样的帮手，这也无法帮助我“有条件地导入”。

Answer 1

Webpack有web配置对象，当目标为import * as fs from "fs";时，您可以告诉它what to do with built-in node modules and objects。

例如，如果您希望fs导致undefined为node: targetPlatform.isWeb ? {fs: 'empty'} : undefined,，您可以尝试将此行添加到webpack配置中：

fs

然后，在运行时，您可以检查结果并避免使用import * as fs from "fs"; if (fs.writeFile) { }方法，如果它们未定义：

{{1}}

使用webpack为网络部署Electron app时，防止发出某些代码

1 个答案: