我正在尝试创建我的第一个电子应用程序。我决定使用以下工具/技术:
- 类型脚本
- 网络包(版本3)
- React
本地环境是OS X High Sierra。
问题是,我甚至不能建立我的应用程序,我得到错误的建设与WebPack:“Module not found: Error: Can't resolve 'fs' in '<root>/node_modules/electron'
“
我的配置如下: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文件中,它会正常工作(用“require”替换“import”)。
提前感谢您的帮助!
更新
如果在webpack.config.js
中设置{ target: 'node', }
,则在构建步骤中没有错误,但如果我尝试打开应用程序,我会得到:
App threw an error during load
Error: Electron failed to install correctly, please delete node_modules/electron and try installing again
重新安装节点模块没有帮助。
5条答案
按热度按时间g2ieeal71#
好了,我终于发现解决方案对我有效了。“target”选项应该在
webpack.config.js
中定义。而不应该是{ target: 'node' }
,就像我之前尝试的那样正如它所显示的,Webpack有特定的电子应用程序的目标设置,因此正确的方法是设置它:
或
就这样了,仔细看一下文件就行了:-(
hgqdbh6s2#
试试这个
ds97pgxw3#
我在一次搜索中发现了这个问题,我想提供一个改进的答案来处理只发生在某些构建目标上的错误:
i7uq4tfw4#
添加到原始答案。如果您使用的是Electron + Next.js,则需要在
next.config.js
文件中指定target
。如果您没有next.config.js
文件,请在应用的根级别(package.json
所在的位置)创建它。添加以下内容:z4bn682m5#
我觉得我应该添加一个额外的答案,任何人谁是没有帮助的其他答案。我花了一段时间试图更新旧的电子项目到新的模块构建,同时也实现了Typescript,我一直被击中:
然后...
在经历了很多痛苦和大量的评论之后,我终于发现罪魁祸首是一个
require("electron")
语句。我把它改为window.require("electron")
,它就活了!所以我希望这能帮助到别人(或者未来的我)!