React와 Typescript로 새로운 Electron 앱을 시작하세요.

23034 단어 reactelectrontypescripttutorial

전자 란 무엇입니까?



Electron은 네이티브 애플리케이션을 만들기 위한 프레임워크입니다. 오픈 소스 및 크로스 플랫폼입니다. Javascript, HTML 및 CSS를 이미 알고 있다면 Electron으로 애플리케이션을 구축할 수 있습니다.

이 튜토리얼에서는 webpack, react 및 Typescript를 사용하여 처음부터 전자 프로젝트를 시작하는 방법을 보여줍니다.

일렉트로닉으로 시작하세요.



새 폴더와 새npm 프로젝트를 만들어 시작하겠습니다.

mkdir electron-react-ts
cd electron-react-ts
npm init -y

이제 이러한 종속성을 설치하십시오.

npm install --save-dev electron \
webpack webpack-cli webpack-dev-server \
babel-loader @babel/core @babel/preset-env \
@babel/preset-react @babel/preset-typescript
tsconfig.json 파일을 만듭니다. 이를 통해 typescript 컴파일러에 대한 구성을 지정할 수 있습니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "dom",
      "es2015",
      "es2016",
      "es2017"
    ],
    "allowJs": true,
    "jsx": "react",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
  }
}

앱의 루트에 babel.config.js 및 index.html 파일을 만듭니다.

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-typescript'
  ]
}




<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>New Electron App</title>
</head>
<body>
</body>
</html>

앱의 루트에 webpack.electron.config.js라는 새 파일을 생성해 보겠습니다. 이 webpack 파일은 전자 앱을 dist 폴더로 컴파일합니다.

const path = require('path');

module.exports = {
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  devtool: 'source-map',
  entry: './electron/main.ts',
  target: 'electron-main',
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js',
  },
};

이것은 대상을 제외하고 typescript에 대한 일반적인 웹팩 구성처럼 보입니다. 대상은 webpack이 컴파일할 특정 환경입니다. 이 경우 electron-main 입니다.
electron 폴더를 만든 다음 다음 코드를 사용하여 main.ts 파일 안에 넣습니다.
이 파일은 창을 만들고 앱의 시스템 이벤트를 처리해야 합니다.

import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as url from 'url';

let mainWindow: Electron.BrowserWindow | null;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL(`http://localhost:4000`);
  } else {
    mainWindow.loadURL(
      url.format({
          pathname: path.join(__dirname, '../index.html'),
          protocol: 'file:',
          slashes: true
      })
    );
  }

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);
app.allowRendererProcessReuse = true;
BrowserWindow 모듈은 새 창을 만들고 반응 앱을 렌더링합니다.

이제 전자를 실행하기 위해 package.json 파일에 스크립트를 추가해 보겠습니다. 또한 전자 앱이 컴파일된 경로의 main 필드를 변경해야 합니다.

{
  "main": "./dist/main.js",
    "scripts": {
    "dev:electron": "NODE_ENV=development webpack --config webpack.electron.config.js --mode development && electron ."
  },
}

이제 콘솔에서 npm run dev:electron를 실행하십시오.

참고: Windows를 사용하는 경우 오류가 발생할 가능성이 있습니다. 이는 NODE_ENV가 명령으로 인식되지 않기 때문입니다. crossenv을 설치하고 NODE_ENV 앞에 명령을 배치해야 합니다.

반응 앱을 추가합니다.



이제 전자 앱을 실행했으므로 이 전자 컨텍스트 내에서 실행되도록 반응 앱을 설정하겠습니다.

몇 가지 종속성을 설치해야 합니다.

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

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

새webpack.react.config.js 파일을 만듭니다.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    mainFields: ['main', 'module', 'browser'],
  },
  entry: './src/app.tsx',
  target: 'electron-renderer',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, '../dist/renderer'),
    historyApiFallback: true,
    compress: true,
    hot: true,
    port: 4000,
    publicPath: '/',
  },
  output: {
    path: path.resolve(__dirname, '../dist/renderer'),
    filename: 'js/[name].js',
    publicPath: './',
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
};
package.json 파일은 이제 다음과 같아야 합니다.

{
  "main": "./dist/main.js",
    "scripts": {
      "dev:electron": "NODE_ENV=development webpack --config webpack.electron.config.js --mode development && electron .",
      "dev:react": "NODE_ENV=development webpack-dev-server --config webpack.react.config.js --mode development"
    },
 }

이 앱을 사용하기 위해 내부에 src 파일이 있는 새 폴더app.tsx를 생성해 보겠습니다.

import React from 'react';
import ReactDom from 'react-dom';

const mainElement = document.createElement('div');
document.body.appendChild(mainElement);

const App = () => {
  return (
    <h1>
      Hi from a react app
    </h1>
  )
}

ReactDom.render(<App />, mainElement);

이제 준비가 되었습니다.
한 콘솔에서는 npm run dev:react를 실행하고 다른 콘솔에서는 npm run dev: electron를 실행하십시오.



코드는 여기repo에서 확인하십시오.
Caffe를 설치하고 예제를 이동할 때까지
제7장:zookeeper 기반의 분포식session

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage