분류 javascript

Electron, Typescript, React 및 Webpack 시작하기

컨텐츠 정보

  • 조회 349 (작성일 )

본문

Setting-up-Electron-blog.png 


오늘날 데스크톱 응용 프로그램을 구축해야 하는 경우 Electron이 점점 일반화되고 있습니다. 크로스 플랫폼이며 이미 알고 있는 것과 동일한 웹 기술을 사용하여 빌드 됩니다.


SitePen에서 오랫동안 Electron을 사용하고 있으며 Dojo를 사용하여 Electron을 설정하는 것에 대해 이야기했습니다. 여기에서는 Electron 설정에 대한 의견 있는 접근 방식 인 TypeScript, React 및 Webpack을 살펴 봅니다.


기본 Electron 프로젝트부터 시작하여 점진적으로 엔터프라이즈급 솔루션으로 빌드합니다.


https://www.sitepen.com/blog/getting-started-with-electron-typescript-react-and-webpack/ 


빈 Electron 프로젝트 초기화 


먼저 바닐라 일렉트론 프로젝트가 필요합니다. 공식 Electron First App 튜토리얼 및 Electron Quickstart 저장소와 사실상 동일합니다.


Electron은 Electron 자체 인 기본 프로세스와 본질적으로 Electron이 Chromium 기반 브라우저에 로드 하는 웹 페이지 인 렌더 프로세스의 두 가지 프로세스로 구성됩니다.


의존성 설치 

npm init -y
npm install --save-dev electron


Electron (main) entry point 


// src/electron.js
const { app, BrowserWindow } = require('electron');
 
function createWindow () {
  // Create the browser window.
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
 
  // and load the index.html of the app.
  win.loadFile('index.html');
}
 
app.on('ready', createWindow);


Electron (render) entry point 


<!-- // src/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <div id="app">
      <h1>Hello World!</h1>
    </div>
  </body>
</html>


npx electron src / electron.js로 앱을 실행할 수 있습니다. 이것을 package.json에 스크립트로 추가합니다.


// package.json
"scripts": {
  "start": "electron src/electron.js"
}


TypeScript 추가 


상용구 JavaScript도 유효한 TypeScript이므로 src / electron.js의 이름을 electron.ts로 바꾸겠습니다. TypeScript 컴파일러를 설치하고 구성하면 됩니다.


의존성 설치 

npm install --save-dev typescript 


TypeScript 구성 


touch tsconfig.json 


npm 스크립트 업데이트 


"scripts": {
  "build": "tsc src/electron.ts"
}


웹팩 추가 


다음으로 응용 프로그램을 최적화 하기 위해 Webpack을 설정합니다. 웹팩 구성은 일련의 진입 점으로 구성됩니다. Webpack은 파일 및 해당 종속성을 로더를 통해 전달하여 각 진입 점을 처리합니다. 로더는 파일 확장자 당 로더가 있는 규칙을 통해 선택됩니다. 마지막으로 Webpack은 출력을 지정된 위치에 덤프합니다.


전자 기본 프로세스를 위한 단일 진입 점을 만들고 모든 * .ts 파일에 대한 로더를 추가하여 TypeScript 컴파일러를 통과하고 Webpack에 출력을 소스 파일과 함께 덤프하도록 지시합니다.


의존성 설치 


npm install --save-dev webpack webpack-cli ts-loader 


웹팩 구성 


// webpack.config.js
module.exports = [
  {
    mode: 'development',
    entry: './src/electron.ts',
    target: 'electron-main',
    module: {
      rules: [{
        test: /\.ts$/,
        include: /src/,
        use: [{ loader: 'ts-loader' }]
      }]
    },
    output: {
      path: __dirname + '/src',
      filename: 'electron.js'
    }
  }
];


다음은 각 구성에 대한 분석입니다.


  • mode: develop 개발 빌드 (생산과 반대).
  • entry: './src/electron.ts 진입 점의 위치
  • target: 'electron-main'  타겟팅 할 환경을 지정합니다. Webpack은 전자의 주요 과정에 대해 구체적으로 알고 있습니다.
  • test: /\.ts$/  이 규칙이 .ts 확장자로 끝나는 모든 파일과 일치하도록 지정합니다.
  • include: /src/   src 내의 모든 파일이 이 규칙과 일치하도록 고려되도록 지정합니다.
  • use: [{ loader: 'ts-loader' }]  이 규칙이 일치 할 때 사용할 로더를 지정합니다.  
  • path: __dirname + '/src'  모든 출력 파일이 위치 할 디렉토리입니다.
  • filename: 'electron.js'  기본 출력 번들 파일 이름.

npm 스크립트 업데이트 


// package.json
"scripts": {
  "build": "webpack --config ./webpack.config.js",
  "start": "npm run build && electron ./src/electron.js"
}


React 추가 


React 렌더 프로세스는 Electron 컨텍스트 내에서 사용되고 있음을 알 필요가 없으므로 React 설정은 바닐라 React 프로젝트 설정과 유사합니다.


의존성 설치 


npm install --save-dev react react-dom @types/react @types/react-dom 


React entry point 


// src/react.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
const Index = () => {
    return <div>Hello React!</div>;
};
 
ReactDOM.render(<Index />, document.getElementById('app'));


TypeScript 구성 


렌더 진입 점은 .ts가 아니라 .tsx입니다. TypeScript 컴파일러는 TSX (JSX와 동일한 TypeScript)를 기본적으로 지원하지만 TSX 리소스를 처리하는 방법을 TypeScript에 알려야 합니다. 당연히 React TSX 제품을 사용하고 있습니다.


// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react"
  }
}


다음으로 Webpack 구성에 새로운 진입 점을 만듭니다. Webpack은 진입 점 (및 해당 종속 항목)을 처리하고 html-webpack-plugin을 통해 index.html에 결과를 로드합니다.


의존성 설치 


npm install --save-dev html-webpack-plugin 


웹팩 구성 


// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = [
  ...
  {
    mode: 'development',
    entry: './src/react.tsx',
    target: 'electron-renderer',
    devtool: 'source-map',
    module: { rules: [{
      test: /\.ts(x?)$/,
      include: /src/,
      use: [{ loader: 'ts-loader' }]
    }] },
    output: {
      path: __dirname + '/dist',
      filename: 'react.js'
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html'
      })
    ]
  }
];


이 구성은 기본 프로세스의 구성과 유사하지만 몇 가지 새로운 항목이 있습니다.

  • target : 'electron-renderer'타겟팅 할 환경을 지정합니다. Webpack은 전자 렌더러 프로세스에 대해 구체적으로 알고 있습니다.
  • 플러그인 ... 빌드 프로세스 중에 사용되는 플러그인을 지정합니다. 플러그인은 번들 레벨에서 작동하며 후크를 통해 빌드 프로세스와 더 깊이 통합 될 수 있다는 점에서 플러그인과 로더가 다릅니다. 로더는 파일 레벨에서 작동합니다. HtmlWebpackPlugin은 지정된 템플릿 파일에서 출력 번들에 대한 참조를 자동으로 추가합니다.

렌더러 파일의 출력 경로는 더 이상 src 디렉토리가 아니므로 Webpack에 리소스를 새로운 dist 디렉토리에 두도록 지시했습니다. 기본 프로세스 구성에 대해서도 동일하게하겠습니다.


// webpack.config.js
...
  output: {
    path: __dirname + '/dist',
    filename: 'electron.js'
  }


출력 파일이 dist 디렉토리 안에 있으면 npm 스크립트를 업데이트 해야 합니다.


"scripts": {
  ...
  "start": "npm run build && electron ./dist/electron.js"
}


결론 


그리고 그게 다야! 결과적으로 Electron은 주요 프런트 엔드 프레임 워크를 실행하는 데 적합하고 Webpack은 여러 항목을 한 번에 패키징 하는 데 적합합니다. 전체 과정에는 약간의 불신이 필요했습니다.



WebpackReactTypescriptElectron