javascript - ฉันจะใช้สคริปต์ preload หลายตัวสำหรับหน้าต่าง Electron ที่แตกต่างกันได้อย่างไรเมื่อใช้ electron forge กับเทมเพลต webpack?

ฉันใช้เทมเพลต typescript+webpack จาก electron forge

สำหรับการโหลด สคริปต์ preload หนึ่งไฟล์ ด้วย webpack จะมีค่าคงที่ที่เรียกว่า MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY ซึ่งสามารถตั้งค่าจาก package.json ได้ เช่น: "preload": { "js": "myPreload.ts" } ค่าคงที่นี้จะถูกแก้ไข (resolved) จากภายใน Electron Forge - Webpack Plugin ขึ้นอยู่กับว่าการรันแอปพลิเคชันเป็นโหมดดีบักหรือโหมดปล่อย.

ฉันได้ตั้งค่านี้ไว้แล้ว และมันทำงานได้ดีถ้าคุณมีหน้าต่างเดียวหรือหลายหน้าต่างที่ใช้สคริปต์ preload.ts เดียวกัน อย่างไรก็ตาม ฉันไม่สามารถหาวิธีระบุสคริปต์ preload ที่แตกต่างกันหลายสคริปต์สำหรับหน้าต่างอื่น ๆ ได้

ฉันจะสามารถใช้สคริปต์ preload.ts หลายตัวที่แตกต่างกัน (สำหรับหน้าต่างต่าง ๆ) กับปลั๊กอิน electron forge webpack ได้อย่างไร?

คำตอบ #1

จริงๆ แล้วมันค่อนข้างง่ายในการเพิ่มสคริปต์หลายตัว แต่เนื่องจากฉันไม่เห็นมีการบันทึกเรื่องนี้ไว้ที่ไหน ฉันจึงจะตอบคำถามของตัวเองที่นี่ ฟิลด์ name ของการตั้งค่าเป็นสิ่งสำคัญ เพราะชื่อที่เป็นตัวพิมพ์ใหญ่จะเป็นคำนำหน้าของค่าคงที่ของ webpack (เช่น "name": "my_name" จะทำให้ค่าคงที่ถูกเรียกว่า MY_NAME_PRELOAD_WEBPACK_ENTRY)

หากคุณต้องการเพิ่มสคริปต์ preload หลายตัวในตอนนี้ คุณจะต้องเพิ่มจุดเริ่มต้นหลายจุด ซึ่งคุณสามารถอ้างอิงโดยใช้ชื่อของมันได้ น่าเสียดายที่แต่ละจุดเริ่มต้นยังต้องการฟิลด์ html และ js ด้วย แต่ถ้าคุณไม่จำเป็นต้องใช้ฟิลด์เหล่านั้น คุณสามารถสร้างไฟล์ว่างที่มีนามสกุลถูกต้องและชี้ไปที่ไฟล์เหล่านี้ได้

นี่คือตัวอย่างเพื่ออธิบายประเด็นเหล่านี้ให้ชัดเจนขึ้น:

  "config": {
    "forge": {
      "plugins": [
        {
          "name": "@electron-forge/plugin-webpack",
          "config": {
            "mainConfig": "./webpack.main.config.js",
            "renderer": {
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                {
                  "name": "main_window",
                  "html": "./src/main_window/index.html",
                  "js": "./src/main_window/index.js",
                  "preload": {
                    "js": "./src/main_window/preload.js"
                  }
                },
                {
                  "name": "extra_preload_main_window",
                  "html": "./src/empty.html",
                  "js": "./src/empty.js",
                  "preload": {
                    "js": "./src/main_window/preload2.js"
                  }
                },
                {
                  "name": "second_window",
                  "html": "./src/second_window/index.html",
                  "js": "./src/second_window/index.js",
                  "preload": {
                    "js": "./src/second_window/preload.js"
                  }
                }
              ]
            }
          }
        }
      ]
    }
  }

ซึ่งจากนั้นจะให้ค่าคงที่ (ที่เกี่ยวข้อง) เหล่านี้แก่คุณ:

// Path to renderer of main window.
declare MAIN_WINDOW_WEBPACK_ENTRY;

// Path to first preload script (of main window).
declare MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY;

// Path to the second preload script (of the main window).
declare EXTRA_PRELOAD_MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY;

// Preload and renderer scripts for other window.
declare SECOND_WINDOW_WEBPACK_ENTRY;
declare SECOND_WINDOW_PRELOAD_WEBPACK_ENTRY;

ทางเทคนิคแล้วคุณก็จะได้รับเช่นกัน

declare EXTRA_PRELOAD_MAIN_WINDOW_WEBPACK_ENTRY;

แต่ไฟล์นั้นชี้ไปที่ไฟล์ว่าง/ผลลัพธ์ของ webpack