Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия		 Предыдущая версия
electron [2024/12/18 09:45] – mirocowelectron [2025/02/14 16:11] (текущий) – mirocow
Строка 1: Строка 1:
-{{tag>electron nodejs js react vuejs angular}}+{{tag>electron nodejs js javascript react vuejs angular applications}}
  
 ====== Electron ====== ====== Electron ======
Строка 8: Строка 8:
   * [[node-libcurl]]   * [[node-libcurl]]
   * [[leveldb]]   * [[leveldb]]
-  * [[vite]] 
   * [[esr]]   * [[esr]]
   * [[tsc]]   * [[tsc]]
Строка 15: Строка 14:
   * [[tailwindcss]]   * [[tailwindcss]]
   * [[CodeMirror]]   * [[CodeMirror]]
 +  * [[vscode]]
  
 ====== Electron + Webpack 4 + Babel 7 + React 16 + PostCSS + Sass + Ant Design + Jest + Enzyme + Eslint ====== ====== Electron + Webpack 4 + Babel 7 + React 16 + PostCSS + Sass + Ant Design + Jest + Enzyme + Eslint ======
 +
 +<code json>
 +</code>
  
 ====== Electron + VueJs + Typescript + Visual Studio Code ====== ====== Electron + VueJs + Typescript + Visual Studio Code ======
 +
 +<code json>
 +</code>
  
 ====== Electron + React + Typescript + Visual Studio Code ====== ====== Electron + React + Typescript + Visual Studio Code ======
 +
 +===== Создание проекта =====
 +
 +<code bash>
 +$ npm install --save-dev @babel/core @babel/preset-react babel-loader
 +$ npm install --save react react-dom
 +$ npm install --save-dev @types/react @types/react-dom
 +$ npm install --save-dev eslint @eslint/js typescript typescript-eslint
 +$ npm install eslint eslint-plugin-react eslint-plugin-jest eslint-plugin-html \
 +eslint-plugin-json eslint-plugin-filenames eslint-plugin-react-hooks \
 +eslint-plugin-import eslint-plugin-simple-import-sort --save-dev
 +</code>
 +
 +===== Внесение правок =====
 +
 +<code typescript>
 +// webpack.rules.js
 +module.exports = [
 +  // ... existing loader config ...
 +  {
 +    test: /\.jsx?$/,
 +    use: {
 +      loader: 'babel-loader',
 +      options: {
 +        exclude: /node_modules/,
 +        presets: ['@babel/preset-react']
 +      }
 +    }
 +  }
 +  // ... existing loader config ...
 +];
 +</code>
 +
 +<code typescript>
 +// src/app.jsx
 +import * as React from 'react';
 +import { createRoot } from 'react-dom/client';
 +
 +const root = createRoot(document.body);
 +root.render(<h2>Hello from React!</h2>);
 +
 +// src/renderer.js
 +import './app.jsx';
 +</code>
 +
 +<code typescript>
 +// src/app.tsx
 +import { createRoot } from 'react-dom/client';
 +
 +const root = createRoot(document.body);
 +root.render(<h2>Hello from React!</h2>);
 +
 +// src/renderer.ts
 +import './app';
 +</code>
  
 launch.js launch.js
Строка 43: Строка 104:
     },     },
     {     {
-      "name": "Launch electron: main", +      "name": "Attach electron: Renderer Process", 
-      "type": "node", +      "type": "chrome", 
-      "request": "launch", +      "request": "attach", 
-      "protocol": "inspector", +      "port": 9223, 
-      "sourceMaps": true, +      "webRoot": "${workspaceFolder}/packages/insomnia", 
-      "presentation": { +      "timeout": 30000
-        "hidden": true, +
-        "group": "Insomnia", +
-        "order": 1 +
-      }, +
-      "cwd": "${workspaceFolder}/packages/insomnia", +
-      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", +
-      "runtimeArgs": ["--remote-debugging-port=9222", "."], +
-      "outputCapture": "std", +
-      "windows": { +
-        "type": "node", +
-        "request": "launch", +
-        "name": "Electron: main", +
-        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd" +
-      }, +
-      "env": { +
-        "NODE_ENV": "development", +
-        "ELECTRON_IS_DEV": "1" +
-      }+
     },     },
 ] ]
Строка 127: Строка 170:
       }       }
   ]   ]
 +}
 +</code>
 +
 +==== Сборка ====
 +
 +[[https://esbuild.github.io/|EsBuild]]
 +
 +<code bash>
 +$ esr --cache ./scripts/build.ts --noErrorTruncation
 +$ cross-env USE_HARD_LINKS=false electron-builder build --config electron-builder.config.js --dir
 +</code>
 +
 +esbuild.main.ts
 +<code javascript>
 +import esbuild from 'esbuild';
 +import { builtinModules } from 'module';
 +import path from 'path';
 +
 +import pkg from './package.json';
 +
 +interface Options {
 +  mode?: 'development' | 'production';
 +}
 +
 +export default async function build(options: Options) {
 +  // Код сборки
 +  const mode = options.mode || 'production';
 +  const __DEV__ = mode !== 'production';
 +  const PORT = pkg.dev['dev-server-port'];
 +
 +  const outdir = __DEV__
 +    ? path.join(__dirname, 'src')
 +    : path.join(__dirname, 'build');
 +  
 +  const env: Record<string, string> = __DEV__
 +      ? {
 +        'process.env.APP_RENDER_URL': JSON.stringify(
 +          `http://localhost:${PORT}/index.html`
 +        ),
 +        'process.env.NODE_ENV': JSON.stringify('development'),
 +        'process.env.INSOMNIA_ENV': JSON.stringify('development'),
 +        'process.env.BUILD_DATE': JSON.stringify(new Date()),
 +      }
 +      : {
 +        'process.env.NODE_ENV': JSON.stringify('production'),
 +        'process.env.INSOMNIA_ENV': JSON.stringify('production'),
 +        'process.env.BUILD_DATE': JSON.stringify(new Date()),
 +      }; 
 +  const preload = esbuild.build({
 +    entryPoints: ['./src/preload.ts'],
 +    outfile: path.join(outdir, 'preload.js'),
 +    target: 'esnext', // ?
 +    bundle: true,
 +    platform: 'node',
 +    sourcemap: true,
 +    format: 'cjs', // ?
 +    external: ['electron'], // ?
 +  });
 +  const main = esbuild.build({
 +    entryPoints: ['./src/main.development.ts'],
 +    outfile: path.join(outdir, 'main.min.js'),
 +    bundle: true,
 +    platform: 'node',
 +    sourcemap: true,
 +    format: 'cjs', // ?
 +    define: env,
 +    external: [ // ?
 +      'electron',
 +      '@getinsomnia/node-libcurl',
 +      ...Object.keys(pkg.dependencies),
 +      ...Object.keys(builtinModules),
 +    ],
 +  });
 +  return Promise.all([main, preload]);
 +}
 +  
 +// Build if ran as a cli script
 +const isMain = require.main === module;
 +
 +if (isMain) {
 +  const mode =
 +    process.env.NODE_ENV === 'development' ? 'development' : 'production';
 +  build({ mode });
 } }
 </code> </code>
Строка 172: Строка 298:
  
   * https://github.com/electron-react-boilerplate/electron-react-boilerplate   * https://github.com/electron-react-boilerplate/electron-react-boilerplate
 +  * https://github.com/SmallStoneSK/electron-react-template
 +
  
 ====== Документы ====== ====== Документы ======