Create React App으로 만든 electron앱에서 fs 사용하기..

fs 모듈을 쓰려고 하면 `Module not found` 라고 오류가 발생합니다.

문제는 webpack 타겟을 electron-renderer으로 잡아야 하는데, CRA(Create React App)으로 만든 프로젝트는 yarn eject를 해서 수정을 해 줘야 한다.

여기서는 eject를 하지 않고 해결하는 방법이 2가지을 소개 합니다.

craco를 사용하기

craco는 CRA로 만든 프로젝트를 eject하지 않고 간단하게 설정하게 해 주는 패키지이다.

먼저 craco를 설치해 줍니다.

$ npm i -D @craco/craco

그리고, craco.config.js 파일을 만들고 아래 내용을 입력해 줍니다.

module.exports = {
  webpack: {
    configure: {
       target: 'electron-renderer'
    }
  }
};

package.json 파일에서 start와 build 등을 아래와 같이 수정해 줍니다.

"start": "craco start",
"build": "craco build",
"test": "craco test",

마지막으로  BrowserWindow 설정에서 아래와 같이 nodeIntegration, enableRemoteModule 를 추가해 줍니다.

  mainWindow = new BrowserWindow({
    width: 900,
    height: 680,
    frame: false,
    transparent: true,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
    },
  });

이렇게 설정해 주면 fs 사용이 가능해 집니다. 

 

rescripts를 사용하기

rescripts는 CRA프로젝트를 eject하지 않고 설정해서 사용할게 있게 해 주는 패키지 입니다.

rescripts를 설치해 줍니다.

$ npm i -D @rescripts/cli @rescripts/rescript-env

package.json 파일에서 start와 build 등을 아래와 같이 수정해 줍니다.

"start": "rescripts start",
"build": "rescripts build",
"test": "rescripts test",

.rescriptsrc.js 파일을 만들고 아래와 같이 입력해 줍니다.

module.exports = [require.resolve('./.webpack.config.js')]

.webpack.config.js 파일을 만들고 아래와 같이 편집해 줍니다.

module.exports = config => {
  config.target = 'electron-renderer';
  return config;
}

마지막으로 craco와 마찬가지로  BrowserWindow 설정에서 아래와 같이 nodeIntegration, enableRemoteModule 를 추가해 줍니다.

  mainWindow = new BrowserWindow({
    width: 900,
    height: 680,
    frame: false,
    transparent: true,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
    },
  });

이렇게 까지 설정해 주면 fs 사용이 가능해 집니다.