我不知道如何开始这个问题,但主要问题是我无法让这 3 种技术协同工作: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
主要 Electron 进程的代码将进入 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
。有关更多详细信息,请参见下面的线程
How to run and pack external executable using Electron?
两个 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"
}
}
这应该是你的开始,然后你可以添加东西链接tslint
,jslint
,你继续
关于typescript - Electron + typescript + 网页包 : Boilerplate Example,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48972912/