Electron + Typescript + Webpack: ตัวอย่างโครงสร้างเริ่มต้น

ฉันไม่รู้ว่าจะเริ่มต้นคำถามอย่างไร แต่ปัญหาหลักคือฉันไม่สามารถทำให้เทคโนโลยีทั้ง 3 ทำงานร่วมกันได้: Electron + Typescript + Webpack

ฉันเจอ boilerplates น้อย แต่ในนั้นทั้งโค้ด TypeScript จะถูกสร้างด้วย tsc (แทนที่จะใช้ Webpack) หรือเพียงส่วน render เท่านั้นที่สร้างด้วย Webpack และส่วน process หลัก (main.js) ถูกเขียนด้วย js ล้วน

ดังนั้นฉันจึงสงสัยว่ามีใครมีหรือรู้ว่าจะหาตัวอย่างโปรเจกต์เริ่มต้นสำหรับเริ่มโปรเจกต์ Electron + Typescript + Webpack ใหม่ได้จากที่ไหนบ้าง?

เท่าที่ฉันเข้าใจ ควรตั้งค่าให้สร้างส่วนของ main-process และ render-process ของแอปพลิเคชันแยกกัน (น่าจะเป็นไปได้ว่าการตั้งค่าของพวกมันอาจจะแตกต่างกัน)

ขอบคุณล่วงหน้า

คำตอบ #1

ฉันได้เพิ่มตัวอย่างเทมเพลต/บอยเลอร์เพลตในลิงก์ด้านล่าง

https://github.com/tarunlalwani/electron-webpack-typescript-boilerplate

ดังนั้นแนวคิดคือการแบ่งโค้ดออกเป็น 3 โฟลเดอร์

src
|-- common
|-- main
|-- renderer

โค้ดสำหรับกระบวนการหลักของอิเล็กตรอนจะไปที่โฟลเดอร์ main และสำหรับ UI/renderer จะไปที่โฟลเดอร์ renderer

ตอนนี้คุณต้องการใช้ TypeScript ทั้งคู่และมีการตั้งค่า webpack สองแบบ หนึ่งสำหรับการรวม main และอีกหนึ่งสำหรับการรวม renderer

const path = require('path');

console.log(__dirname);
let common_config = {
  node: {
    __dirname: true
  },
  mode: process.env.ENV || 'development',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: [
          /node_modules/,
           path.resolve(__dirname, "src/ui")
        ]
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
};

module.exports = [
  Object.assign({}, common_config, {
    target: 'electron-main',
    entry: {
      renderrer: './src/main/index.ts',
    },
    output: {
      filename: '[name]-bundle.js',
      path: path.resolve(__dirname, 'src/main/dist')
    },
  }),
  Object.assign({}, common_config, {
    target: 'electron-renderer',
    entry: {
      ui: './src/renderer/index.ts',
    },
    output: {
      filename: '[name]-bundle.js',
      path: path.resolve(__dirname, 'src/renderer/dist')
    },
  })
]

ปัญหาอีกอย่างที่เจอก็คือ __dirname จะกลายเป็น / หากไม่ทำอะไรเกี่ยวกับมัน ดังนั้นเราจึงรวมสิ่งด้านล่างใน config ของ webpack ของเรา

  node: {
    __dirname: true
  },

นี่จะทำให้แน่ใจว่ามีเส้นทางแบบสัมพัทธ์พร้อมใช้งาน ตอนนี้เราสามารถใช้ os.cwd() ในสภาพแวดล้อมการพัฒนาและใช้ process.resourcePath ในการผลิต ดูเธรดด้านล่างสำหรับรายละเอียดเพิ่มเติม

วิธีรันและแพ็กโปรแกรมที่สามารถรันได้ภายนอกโดยใช้ Electron?

เป้าหมายสำหรับการกำหนดค่า webpack ทั้งสองต้องแตกต่างกัน ดังนั้นสำหรับ main เราใช้ electron-main และสำหรับ renderer เราใช้ electron-renderer

ไฟล์ tsconfig.json จำเป็นต้องแตกต่างกันสำหรับทั้ง main และ renderer และควรจะตัดกันออก ดังนั้นเราจึงใช้

renderer/tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "target": "es2015",
        "moduleResolution": "node",
        "pretty": true,
        "newLine": "LF",
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "sourceMap": true,
        "skipLibCheck": true,
        "allowJs": true,
        "jsx": "preserve"
    },
    "exclude": [
      "node_modules",
      "src/main"
    ]
}

main/tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "target": "es2015",
        "moduleResolution": "node",
        "pretty": true,
        "newLine": "LF",
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "sourceMap": true,
        "skipLibCheck": true,
        "allowJs": true,
        "jsx": "preserve"
    },
    "exclude": [
      "node_modules",
      "src/renderer"
    ]
}

สิ่งหลักสุดท้ายคือ package.json ของคุณ ซึ่งอยู่ด้านล่าง

{
  "name": "boilerplate",
  "version": "1.0.0",
  "main": "src/main/dist/renderrer-bundle.js",
  "license": "MIT",
  "scripts": {
    "start": "npm-run-all build run-electron",
    "build": "webpack --config webpack.config.js",
    "run-electron": "electron ."
  },
  "dependencies": {
    "electron": "^1.8.2",
    "jquery": "^3.3.1",
    "typescript": "^2.7.2",
    "webpack": "^4.0.1"
  },
  "devDependencies": {
    "@types/electron": "^1.6.10",
    "@types/jquery": "^3.3.0",
    "@types/node": "^9.4.6",
    "html-webpack-plugin": "^2.30.1",
    "npm-run-all": "^4.1.2",
    "ts-loader": "^4.0.0",
    "tslint": "^5.9.1",
    "webpack-cli": "^2.0.9"
  }
}

นี่ควรช่วยให้คุณเริ่มต้นได้ จากนั้นคุณสามารถเพิ่มสิ่งต่างๆ เช่น tslint, jslint เมื่อคุณไปต่อได้

คำตอบ #2

คำตอบของ Tarun Lalwani ดีมากเลย แต่ฉันต้องการเสนอทางเลือกสมัยใหม่ให้กับใครก็ตามที่บังเอิญเจอหน้านี้

https://github.com/hellosoftware-io/electron-typescript-react-mui

มันใช้ Electron 15, TypeScript, และ Webpack 5 นอกจากนี้ยังสนับสนุนการโหลดซ้ำแบบสดตามที่ Netlander ร้องขอ

กลยุทธ์ของฉันคือการตั้งโครงสร้างไฟล์แบบนี้

static
src
|-- main
|-- renderer

โฟลเดอร์ static เก็บภาพ, main เก็บเนื้อหา electron, และ renderer เก็บ js (ปัจจุบันสร้างด้วย react)

ฉันก็ใช้เพียง tsconfig หนึ่งไฟล์และ webpack config สองไฟล์เพื่อพยายามทำให้มันเรียบง่ายขึ้นเล็กน้อย

ฉันหวังว่าสิ่งนี้จะช่วยใครก็ตามที่สะดุดเจอโพสต์นี้ :)