Различия

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

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

Предыдущая версия справа и слева Предыдущая версия
Следующая версия		 Предыдущая версия
electron [2024/12/21 02:43] – [Boilerplate] 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 ======
Строка 14: Строка 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 ======
Строка 26: Строка 27:
  
 ====== 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
Строка 114: Строка 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>