electron 电子和 typescript :无法解析“fs”

w1jd8yoj  于 2022-12-16  发布在  Electron
关注(0)|答案(5)|浏览(209)

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

  • 类型脚本
  • 网络包(版本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

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

g2ieeal7

g2ieeal71#

好了,我终于发现解决方案对我有效了。“target”选项应该在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'
}

就这样了,仔细看一下文件就行了:-(

hgqdbh6s

hgqdbh6s2#

试试这个

module.exports = {
  configureWebpack: {
    externals: {
      './cptable': 'var cptable'
    },
    resolve: {
      fallback: {
        'fs': false,
        'crypto': false
      }
    }
  },
}
ds97pgxw

ds97pgxw3#

我在一次搜索中发现了这个问题,我想提供一个改进的答案来处理只发生在某些构建目标上的错误:

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'
        }
    }
]
i7uq4tfw

i7uq4tfw4#

添加到原始答案。如果您使用的是Electron + Next.js,则需要在next.config.js文件中指定target。如果您没有next.config.js文件,请在应用的根级别(package.json所在的位置)创建它。添加以下内容:

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.target = "electron-renderer";
    }
    return config;
  },
};
z4bn682m

z4bn682m5#

我觉得我应该添加一个额外的答案,任何人谁是没有帮助的其他答案。我花了一段时间试图更新旧的电子项目到新的模块构建,同时也实现了Typescript,我一直被击中:

[0] ERROR in ./node_modules/electron/index.js 1:11-24
[0] Module not found: Error: Can't resolve 'fs' in '<root_dir>/node_modules/electron'

然后...

[0] ERROR in ./node_modules/electron/index.js 3:13-28
[0] Module not found: Error: Can't resolve 'path' in '<root_dir>/node_modules/electron'

在经历了很多痛苦和大量的评论之后,我终于发现罪魁祸首是一个require("electron")语句。我把它改为window.require("electron"),它就活了!
所以我希望这能帮助到别人(或者未来的我)!

相关问题