一旦我设置 nodeIntegration:false -> "Uncaught ReferenceError: require is not defined at Object.url (external "url":1) "#electron-#react-#typescript

Question

一旦我设置 nodeIntegration:false 我得到这个错误： “未捕获的 ReferenceError：在 Object.url 中未定义要求（外部“url”：1）”

点击“external 'url': 1”我得到这行代码：module.exports = require("url")

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "dom",
      "es2015",
      "es2016",
      "es2017"
    ],
    "allowJs": true,
    "jsx": "react",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true ,
    "esModuleInterop": true,
  }
}

webpack.electron.config.js：

const path = require("path");
module.exports = {
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  devtool: "source-map",
  entry: "./electron/src/main.ts",
  target: "electron-main",
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  node: {
    __dirname: false,
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
};

webpack.react.config.js：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    mainFields: ["main", "module", "browser"],
  },
  entry: "./electron/src/app.tsx",
  target: "electron-renderer",
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, "../dist/renderer"),
    historyApiFallback: true,
    compress: true,
    hot: true,
    port: 4000,
    publicPath: "/",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/[name].js",
  },
  plugins: [new HtmlWebpackPlugin()],
};

/electron/src/main.ts：

import { app, BrowserWindow } from "electron";
import * as path from "path";
import * as url from "url";

let mainWindow: Electron.BrowserWindow | null;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: '../preload/preload-app.ts',
      worldSafeExecuteJavaScript: true
    },
  });

  if (process.env.NODE_ENV === "development") {
    mainWindow.loadURL(`http://localhost:4000`);
    mainWindow.webContents.openDevTools();
  } else {
    mainWindow.loadURL(
      url.format({
        pathname: path.join(__dirname, "index.html"),
        protocol: "file:",
        slashes: true,
      })
    );
  }

  mainWindow.on("closed", () => {
    mainWindow = null;
  });
}

app.on("ready", createWindow);
app.allowRendererProcessReuse = true;

/src/preload/preload-app.ts :

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

• 节点版本：v.14.5.0
• 电子版：10.1.3
• webpack 版本：4.44.2
• webpack-cli 版本：3.3.12
• webpack-dev-server 版本：3.11.0
• 反应版本：16.13.1
• 打字稿版本：4.0.3
• 操作系统：Ubuntu 18.04.4 桌面

出于严格的安全原因，如何解决问题，同时保持 nodeIntegration:false + contextIsolation:true？

Answer 1

你正在使用“electron-main”的 webpack 目标包含该 url 导入。如果你想禁用渲染器的节点集成，那么你需要使用“web”之类的东西。