Electron 和 TypeScript：“fs”无法解析

Posted 2023-03-13

【中文标题】Electron 和 TypeScript：“fs”无法解析

【英文标题】：Electron and TypeScript: 'fs' can't be resolved

【发布时间】：2018-07-06 15:51:59

【问题描述】：

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

打字稿 WebPack（第 3 版） 反应

本地环境是 OS X High Sierra。

问题是我什至无法构建我的应用程序，并且在使用 WebPack 构建时出现错误：“Module not found: Error: Can't resolve 'fs' in '<root>/node_modules/electron'”

我的配置如下： 包.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 文件中，它可以正常工作（将 'import' 替换为 'require'）。

提前感谢您的帮助！

更新

如果在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

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

【参考方案1】：

好的，我终于找到了适合我的解决方案。 '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'

就是这样。只需要仔细阅读文档:- (

【讨论】：

由于某种原因这对我不起作用；我的 webpack 配置中存在一定程度的间接性，因为我通过 create-react-app 并使用 rescripts 指定 WebPack 目标。但是，我确定目标设置正确但我仍然无法解决 fs 等问题。

你找到解决办法了吗？

【参考方案2】：

我在搜索中遇到了这个问题，我会提供一个改进的答案来处理仅在某些构建目标上发生的错误：

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

【参考方案3】：

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

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

【参考方案4】：

试试这个

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