反応とtypescriptで新しい電子アプリを起動します.

22841 ワード
react electron typescript tutorial テキストリンク

電子とは


電子は、ネイティブアプリケーションを作成するためのフレームワークです.それはオープンソースとクロスプラットフォームです.JavaScript、HTML、およびCSSを既に知っているなら、電子でアプリケーションを構築することができます.
このチュートリアルでは、WebPack、Reaction、およびTypesScriptを使用してスクラッチから電子プロジェクトを開始する方法を示します.

電子から始める。


新しいフォルダと新しいものを作成することから始めましょう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 ファイル.これにより、typemcriptコンパイラの設定を指定できます.
{
  "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ファイルは、我々の電子アプリをAにコンパイルします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設定のようです.ターゲットは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;
The 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 コード用.
Cmarket database[2021.11.16]
【Rails】seedファイル使い方