Electron 및 TypeScript: 'fs'을(를) 확인할 수 없습니다.

Electron 및 TypeScript: 'fs'을(를) 확인할 수 없습니다.

저는 제 첫 번째 전자 앱을 만들려고 합니다.다음 툴/기술을 사용하기로 결정했습니다.

• 타입스크립트
• 웹 팩(버전 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(); }});

제가 만약 index.ts에서 플레인 js 파일로 그런 코드를 넣으면 ('import'를 'require'로 대체) 제대로 작동하기 때문에 문제가 TypeScript 사용에 방해가 된다고 생각합니다.

미리 도와주셔서 감사합니다!

갱신하다

설정된 경우{ 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

노드 모듈을 다시 설치하는 것은 도움이 되지 않습니다.

네, 마침내 저에게 맞는 해결책을 찾았습니다.'target' 옵션은 다음에서 정의해야 합니다.webpack.config.js그래서는 안 됩니다.{ target: 'node' }전에 시도한 바와 같이

웹팩에는 전자 앱에 대한 특정 대상 설정이 있으므로 올바른 방법은 다음과 같습니다.

{
    // 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'
}

바로 그겁니다.문서만 주의 깊게 읽으면 됩니다 :- (

다른 답변에 도움을 받지 못하는 사람을 위해 추가 답변을 추가해야 할 것 같습니다.Typescript를 구현하는 동안 오래된 Electron 프로젝트를 새 모듈 빌드로 업데이트하려고 시도했는데 다음과 같은 문제가 계속 발생했습니다.

[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")그리고 그것은 살아났습니다!

그래서 저는 그것이 다른 누군가에게 도움이 되기를 바랍니다.

검색 도중 이 문제를 발견했으며 특정 빌드 대상에서만 발생하는 오류를 처리하는 데 대해 개선된 답변을 제공합니다.

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

원래 답변에 추가합니다.Electron + Next.js를 사용하는 경우 다음을 지정해야 합니다.target에next.config.js파일이 없는 경우 앱의 루트 레벨에서 파일을 만듭니다.package.json위치).다음을 추가합니다.

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

이것을 먹어보세요.

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

추가할 때도 있습니다.nodeIntegration:true에webPreferences메인 윈도우가 문제를 해결할 수 있습니다.

언급URL : https://stackoverflow.com/questions/48476061/electron-and-typescript-fs-cant-be-resolved