Electron + Typescript + Webpack：样板示例

Posted 2023-03-13

技术标签:

【中文标题】Electron + Typescript + Webpack：样板示例【英文标题】：Electron + Typescript + Webpack: Boilerplate Example 【发布时间】：2018-08-04 23:44:19 【问题描述】：

我不知道如何开始这个问题，但主要问题是我无法让 3 种技术一起工作：Electron + Typescript + Webpack

我遇到过一些样板文件，但其中要么整个 typescript 是用 tsc 构建的（而不是 Webpack），要么只有 render-part 是用 Webpack 构建的，而主进程（ main.js) 部分是用纯js编写的。

所以我想知道是否有人已经或知道在哪里可以找到样板项目来启动新的 Electron + Typescript + Webpack 项目？

据我了解，它应该配置为分别构建应用程序的主进程和渲染进程部分（可能它们的配置可能不同）。

提前致谢。

【问题讨论】：

你固定在 Webpack 上了吗？如果没有，您可能想尝试FuseBox。我发现它比 Webpack 更容易使用，我不知道它是否更受限制，但它总是足以满足我的需求。他们还在 GitHub 上有一个 Electron 种子。您需要一个可以扩展的示例吗？样板有很多东西设置，比如测试、jslint 等等。我能够使用 TS+Webpack+Electron 为您制作一个足够简单的模板，用于主进程和渲染器进程，并且效果很好。如果这对你有用，我会把它推送到 git 并分享 @TarunLalwani，对不起，我在这里将“样板”一词视为模板。您所描述的正是我正在寻找的（只是一个非常非常简单的项目，可以用作开发的起点）。所以是的，如果您提供对解决方案的访问权限，那就太好了。 @MarkDolbyrev，上传到这里，github.com/tarunlalwani/electron-webpack-typescript-boilerplate。检查一下，让我知道这是否能解决您的目的，然后我将添加一些细节并发布和回答 @TarunLalwani，检查了你的项目，这正是我想要的。请在我的问题中添加您的答案。 【参考方案1】：

我在下面的链接中添加了一个示例模板/样板

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

所以想法是把代码分成3个文件夹

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

主电子进程的代码将进入main 文件夹，UI/renderer 将进入renderer 文件夹。

现在你想在两者中都使用TypeScript 并拥有 2 个 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 变成/ 如果不采取任何措施。所以我们在我们的 webpack 配置中包含以下内容

  node: 
    __dirname: true
  ,

这确保了相对路径可用。现在我们可以在开发环境中使用os.cwd()，在生产环境中使用process.resourcePath。更多详情请看下面的帖子

How to run and pack external executable using Electron?

两个 webpack 配置的目标需要不同。所以对于 main 我们使用electron-main，对于渲染器我们使用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

【讨论】：

感谢您的示例，非常有帮助。为主电子进程和渲染器保留两个不同的 webpack 配置和 typescript 配置有什么好处？ @BillDeRose，这是因为渲染器 javascript 在浏览器中运行，而电子在 nodejs 中运行。他们有两个不同的代码包，这就是为什么有两个不同的配置。 @TarunLalwani 如果有 HMR 会是一个完美的解决方案。 @TarunLalwani 不错的解决方案，是否可以使用 react-scripts-ts npm 做类似的事情，其中 webpack.config.js 不弹出就不容易访问。【参考方案2】：

Tarun Lalwani 的回答非常棒，但我想为任何偶然发现此页面的人提供一个现代替代方案。

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

它使用 electron 15、typescript 和 webpack 5。它还支持 netlander 要求的实时重新加载。

我的策略是像这样设置文件结构