我正在尝试创建我的第一个Electron应用。我决定使用以下工具/技术:
本地环境是OS X High Sierra。
问题在于我甚至无法构建我的应用程序,并且在使用WebPack进行构建时遇到错误:&#34; Module not found: Error: Can't resolve 'fs' in '<root>/node_modules/electron'
&#34;
我的配置如下: 的package.json:
"dependencies": {
"electron": "^1.7.11"
},
"devDependencies": {
"ts-loader": "^3.3.1",
"tslint": "^5.9.1",
"typescript": "^2.6.2",
"webpack": "^3.10.0"
}
tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"noImplicitAny": true,
"outDir": "./dist/",
"sourceMap": true,
"target": "es2015"
}
}
webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.ts',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
// node: {
// 'fs': 'empty'
// },
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
最后,我从电子教程中获取的唯一源代码文件(./src/index.ts
)如下所示:
import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as url from 'url';
let win: Electron.BrowserWindow;
function createWindow () {
// ... common stuff
}
app.on('ready', createWindow);
app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); }});
app.on('activate', () => { if (win === null) { createWindow(); }});
我认为这个问题妨碍了TypeScript的使用,因为如果我将这些代码从index.ts放到普通的js文件中,它就能正常工作(替换&#39; import&#39; with&#39; require& #39;)
提前感谢您的帮助!
更新
如果在{ target: 'node', }
中设置了webpack.config.js
,那么构建步骤就没有错误,但如果我尝试打开应用程序,我会得到:
App threw an error during load
Error: Electron failed to install correctly, please delete node_modules/electron and try installing again
重新安装节点模块并没有帮助。
答案 0 :(得分:7)
好的,最后我发现解决方案对我有用。 &#39;目标&#39;选项应在webpack.config.js
中定义。它应该不是{ target: 'node' }
,正如我之前尝试的那样
如图所示,Webpack具有针对电子应用的特定目标设置,因此正确的方法是设置它:
{
// for files that should be compiled for electron main process
target: 'electron-main'
}
或
{
// for files that should be compiled for electron renderer process
target: 'electron-renderer'
}
那就是它。只需要仔细阅读文档: - (
答案 1 :(得分:0)
我在搜索中遇到了这个问题,我会提供一个改进的答案来处理仅发生在某些构建目标上的错误:
const config = {
//basic module.exports rules here
}
module.exports = [
config,
{
...config,
target: 'web', //target that needs special rules, then all your other special config rules in this object
node: {
fs: 'empty'
}
}
]