Различия

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

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

Предыдущая версия справа и слева Предыдущая версия
Следующая версия		 Предыдущая версия
electron [2023/10/14 22:20] – mirocowelectron [2025/02/14 16:11] (текущий) – mirocow
Строка 1: Строка 1:
 +{{tag>electron nodejs js javascript react vuejs angular applications}}
 +
 ====== Electron ====== ====== Electron ======
 +
 +  * [[vite]]
 +  * [[nedb]]
 +  * [[node-gyp]]
 +  * [[node-libcurl]]
 +  * [[leveldb]]
 +  * [[esr]]
 +  * [[tsc]]
 +  * [[esbuild]]
 +  * [[nunjucks]]
 +  * [[tailwindcss]]
 +  * [[CodeMirror]]
 +  * [[vscode]]
 +
 +====== Electron + Webpack 4 + Babel 7 + React 16 + PostCSS + Sass + Ant Design + Jest + Enzyme + Eslint ======
 +
 +<code json>
 +</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
 +<code json>
 +{
 +// Use IntelliSense to learn about possible attributes.
 +// Hover to view descriptions of existing attributes.
 +// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 +"version": "0.2.0",
 +"configurations": [
 +    {
 +        "type": "node",
 +        "request": "launch",
 +        "name": "Launch Program",
 +        "preLaunchTask": "webpack",
 +        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
 +        "program": "${workspaceFolder}/main.js",
 +        "runtimeArgs": [
 +            ".",
 +            "--enable-logging"
 +        ]
 +    },
 +    {
 +      "name": "Attach electron: Renderer Process",
 +      "type": "chrome",
 +      "request": "attach",
 +      "port": 9223,
 +      "webRoot": "${workspaceFolder}/packages/insomnia",
 +      "timeout": 30000
 +    },
 +]
 +}
 +</code>
 +
 +tasks.js
 +<code json>
 +{
 +// See https://go.microsoft.com/fwlink/?LinkId=733558
 +// for the documentation about the tasks.json format
 +"version": "2.0.0",
 +"tasks": [
 +    {
 +        "label": "webpack",
 +        "command": "webpack",
 +        "args": []
 +    }
 +]
 +}
 +</code>
 +
 +tsconfig.json
 +<code json>
 +{
 +// Use IntelliSense to learn about possible attributes.
 +// Hover to view descriptions of existing attributes.
 +// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 +"version": "0.2.0",
 +"configurations": [  
 +    {
 +        "type": "node",
 +        "request": "launch",
 +        "name": "Electron: Main",
 +        "preLaunchTask": "webpack",
 +        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
 +        "program": "${workspaceFolder}/main.js",
 +        "runtimeArgs": [
 +            ".",
 +            "--enable-logging",
 +            "--remote-debugging-port=9223",
 +        ]
 +    },
 +      {
 +          "name": "Electron: Renderer",
 +          "type": "chrome",
 +          "request": "attach",
 +          "port": 9223,
 +          "webRoot": "${workspaceFolder}",
 +          "timeout": 30000
 +      }
 +],
 +"compounds": [
 +      {
 +          "name": "Electron: All",
 +          "configurations": [
 +              "Electron: Main",
 +              "Electron: Renderer"
 +          ]
 +      }
 +  ]
 +}
 +</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>
 +
 +webpack.config.js
 +<code javascript>
 +module.exports = {
 +    entry: "./src/index.tsx",
 +    output: {
 +        filename: "./bundle.js",
 +        //path: __dirname + "/dist"        
 +    },
 +    mode: "production" ,
 +
 +// Enable sourcemaps for debugging webpack output.
 +    devtool: "source-map",
 +
 +    resolve: {
 +        // Add '.ts' and '.tsx' as resolvable extensions.
 +        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".json"]
 +    },
 +
 +    module: {
 +        rules: [
 +            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
 +            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
 +
 +            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
 +            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
 +        ]
 +    },
 +
 +// When importing a module whose path matches one of the following, just
 +    // assume a corresponding global variable exists and use that instead.
 +    // This is important because it allows us to avoid bundling all of our
 +    // dependencies, which allows browsers to cache those libraries between builds.
 +    externals: {
 +        // "react": "React",
 +        // "react-dom": "ReactDOM"
 +    },
 +};
 +</code>
 +
 +====== Boilerplate ======
 +
 +  * https://github.com/electron-react-boilerplate/electron-react-boilerplate
 +  * https://github.com/SmallStoneSK/electron-react-template
 +
 +
 +====== Документы ======
 +
 +  * [[https://www.electronjs.org/docs/latest/|Докуметация]]
 +  * [[https://www.electronjs.org/docs/latest/api/app|Докуметация API]]
 +
 +====== Ссылки ======
 +
  
   - [[Electron:vscode]]   - [[Electron:vscode]]