电子和TypeScript:' fs'无法解决

时间:2018-01-27 13:00:17

标签: typescript webpack electron

我正在尝试创建我的第一个Electron应用。我决定使用以下工具/技术:

  • 打字稿
  • WebPack(第3版)
  • 阵营

本地环境是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

重新安装节点模块并没有帮助。

2 个答案:

答案 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'
        }
    }
]