我不知道该如何提问，但主要问题是我无法让三种技术一起使用：Electron + Typescript + Webpack。
我遇到了几个样板文件，但它们要么是整个typescript都用tsc构建（而不是Webpack），要么只有渲染部分使用Webpack构建，主进程（main.js）部分则使用纯JS编写。
所以，我想知道是否有人拥有或知道哪里可以找到一个模板项目来启动新的 Electron + Typescript + Webpack 项目？
据我所知，应该配置为单独构建应用程序的主进程和渲染进程部分（可能它们的配置不同）。
提前感谢您的回复。
我在下面的链接上添加了一个模板/样板文件：
https://github.com/tarunlalwani/electron-webpack-typescript-boilerplate
因此，想法是将代码分为3个文件夹。
src
|-- common
|-- main
|-- renderer
主进程的代码将在main文件夹中，UI/渲染器的代码将在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 配置的目标需要不同。因此，对于主要的配置，我们使用electron-main，对于渲染器，我们使用electron-renderer
renderer/tsconfig.json
tsconfig.json 对于main和renderer需要不同，并且应该互相排除。所以我们使用上面的配置。
{
"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"
]
}
主要/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 这样的东西
static
src
|-- main
|-- renderer
静态文件夹存放图片，main文件夹存放Electron内容，renderer文件夹存放JS（目前使用React构建）。
我还使用了一个tsconfig和两个webpack配置来尝试简化事情。
希望这可以帮助任何偶然遇到这篇文章的人 :)
一直在寻找类似的React和TypeScript的Electron集成开发工具，但要使用最新的v16版本和Devtools。目前正在使用这个样板工具，特别是为了热重载资源和模块（HMR）。不喜欢LESS样式表，更喜欢可以通过提供的webpack配置轻松更改的SASS。
https://github.com/codesbiome/electron-react-webpack-typescript-2021
看起来他们最近甚至更新了更多的内容，使用自定义的窗口标题栏和文件菜单等等。