Electron + Typescript + Webpack：样板示例

Question

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

我遇到过一些样板文件，但在它们中，整个打字稿都是用 tsc（而不是 Webpack）构建的，或者只有渲染部分是用 Webpack 构建的，并且主进程（main.js）部分是用纯js写的。

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

据我所知，它应该被配置为单独构建应用程序的主进程和渲染进程部分（可能它们的配置可能不同）。

提前致谢。

Answer 1

我在下方添加了示例 template/boilerplate link

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。有关更多详细信息，请参阅下面的线程

两个 webpack 配置的目标需要不同。所以对于 main 我们使用 electron-main 而对于 renderer 我们使用 electron-renderer

main 和 renderer 的 tsconfig.json 需要不同，并且应该相互排除。所以我们使用

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"
  }
}

这应该是你的开始，然后你可以添加东西 link tslint, jslint 随着你的前进

Answer 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 配置来尝试简单一点。

我希望这对偶然发现这个问题的人有所帮助 post :)

Answer 3

一直在寻找类似的 React 和 TypeScript，但具有最新的 Electron v16 和 Devtools 集成。现在使用这个样板工具，专门用于热重载资产和模块（HMR）。不喜欢 LESS 样式表，更喜欢 SASS，它可以通过提供的 webpack 配置轻松更改。

https://github.com/codesbiome/electron-react-webpack-typescript-2021

（似乎他们最近甚至更新了它，使用自定义 Window 标题栏和文件菜单等进行了更多更改）

Electron + Typescript + Webpack：样板示例

Electron + Typescript + Webpack: Boilerplate Example

typescript

webpack

electron

boilerplate