{"id":3593,"date":"2024-02-25T00:41:44","date_gmt":"2024-02-24T15:41:44","guid":{"rendered":"https:\/\/test.ji0vwl.net\/?p=3593"},"modified":"2024-03-18T22:40:38","modified_gmt":"2024-03-18T13:40:38","slug":"mac%e3%81%a7-electron-forge-react-mui-%e3%81%a7pc%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e3%82%8b%ef%bc%88%e3%81%9d%e3%81%ae%ef%bc%92%ef%bc%89","status":"publish","type":"post","link":"https:\/\/ji0vwl.net\/index.php\/2024\/02\/25\/3593\/","title":{"rendered":"Mac\u3068 Electron Forge + React + MUI \u3067PC\u30a2\u30d7\u30ea\u3092\u4f5c\u308b\uff08\u305d\u306e\uff12\uff09"},"content":{"rendered":"

Mac\u3068 Electron Forge + React + MUI \u3067PC\u30a2\u30d7\u30ea\u3092\u4f5c\u308b\uff08\u305d\u306e\uff11\uff09<\/a>\u3067\u4f5c\u6210\u3057\u305f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306bReact\u3092\u5c0e\u5165\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n

$ npm install --save react react-dom\r\n$ npm install --save-dev @types\/react @types\/react-dom\r\n<\/pre>\n
tsconfig.json \u306b React \u3092\u4f7f\u3046\u305f\u3081\u00a0“jsx”: “react-jsx”,<\/strong> \u3092\u8ffd\u8a18\u3057\u307e\u3059\u3002<\/p>\n
$ vim tsconfig.json\r\n-----\r\n{\r\n  \"compilerOptions\": {\r\n    \"jsx\": \"react-jsx\",<\/strong>\r\n    \"target\": \"ESNext\",\r\n    \"module\": \"commonjs\",\r\n    \"allowJs\": true,\r\n    \"skipLibCheck\": true,\r\n    \"esModuleInterop\": true,\r\n    \"noImplicitAny\": true,\r\n    \"sourceMap\": true,\r\n    \"baseUrl\": \".\",\r\n    \"outDir\": \"dist\",\r\n    \"moduleResolution\": \"node\",\r\n    \"resolveJsonModule\": true\r\n  }\r\n}\r\n-----\r\n:wq \r\n<\/pre>\n
.\/src \u5185\u306b\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30bd\u30fc\u30b9\u304c\u5165\u3063\u3066\u3044\u307e\u3059\u304c\u3001\u30e1\u30a4\u30f3\u30d7\u30ed\u30bb\u30b9\u3068\u3001\u30ec\u30f3\u30c0\u30e9\u30fc\u30d7\u30ed\u30bb\u30b9\u306e\u533a\u5225\u304c\u3064\u304d\u3084\u3059\u3044\u3088\u3046\u306b\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5206\u3051\u3092\u3057\u3066\u304a\u304d\u307e\u3059\u3002\u3053\u3061\u3089<\/a>\u3092\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3057\u305f\u3002<\/p>\n
(\u203b2024\/3\/18\u8ffd\u8a18 Vite\u3067\u4f5c\u3063\u305f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306f\u3001index.html\u306fsrc\u3067\u306f\u306a\u304froot\u306b\u7f6e\u304b\u308c\u308b\u3088\u3046\u3067\u3059)<\/p>\n
$ cd src\r\n$ mkdir main\r\n$ mv main.ts .\/main\r\n$ mv preload.ts .\/main\r\n\r\n$ mkdir renderer\r\n$ mv index.css .\/renderer\r\n$ mv renderer.ts .\/renderer\/index.tsx\r\n<\/pre>\n
\u30d5\u30a9\u30eb\u30c0\u69cb\u6210\u3092\u5909\u66f4\u3057\u305f\u306e\u3067\u3001\u95a2\u9023\u8a2d\u5b9a\u3092\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n
forge.config.ts\u306e\u4ee5\u4e0b\u306e\u90e8\u5206
\nbuild: [
\n{
\n\/\/ `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
\nentry: ‘src\/main\/main.ts’,<\/strong>
\nconfig: ‘vite.main.config.ts’,
\n},
\n{
\nentry: ‘src\/main\/preload.ts’,<\/strong>
\nconfig: ‘vite.preload.config.ts’,
\n},
\n],<\/p>\n
$ cd ..\/\r\n$ vim forge.config.ts\r\n-----\r\nimport type { ForgeConfig } from '@electron-forge\/shared-types';\r\nimport { MakerSquirrel } from '@electron-forge\/maker-squirrel';\r\nimport { MakerZIP } from '@electron-forge\/maker-zip';\r\nimport { MakerDeb } from '@electron-forge\/maker-deb';\r\nimport { MakerRpm } from '@electron-forge\/maker-rpm';\r\nimport { VitePlugin } from '@electron-forge\/plugin-vite';\r\nimport { FusesPlugin } from '@electron-forge\/plugin-fuses';\r\nimport { FuseV1Options, FuseVersion } from '@electron\/fuses';\r\n\r\nconst config: ForgeConfig = {\r\n  packagerConfig: {\r\n    asar: true,\r\n  },\r\n  rebuildConfig: {},\r\n  makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],\r\n  plugins: [\r\n    new VitePlugin({\r\n      \/\/ `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.\r\n      \/\/ If you are familiar with Vite configuration, it will look really familiar.\r\n      build: [\r\n        {\r\n          \/\/ `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.\r\n          entry: 'src\/main\/main.ts',<\/strong>\r\n          config: 'vite.main.config.ts',\r\n        },\r\n        {\r\n          entry: 'src\/main\/preload.ts',<\/strong>\r\n          config: 'vite.preload.config.ts',\r\n        },\r\n      ],\r\n      renderer: [\r\n        {\r\n          name: 'main_window',\r\n          config: 'vite.renderer.config.ts',\r\n        },\r\n      ],\r\n    }),\r\n    \/\/ Fuses are used to enable\/disable various Electron functionality\r\n    \/\/ at package time, before code signing the application\r\n    new FusesPlugin({\r\n      version: FuseVersion.V1,\r\n      [FuseV1Options.RunAsNode]: false,\r\n      [FuseV1Options.EnableCookieEncryption]: true,\r\n      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,\r\n      [FuseV1Options.EnableNodeCliInspectArguments]: false,\r\n      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,\r\n      [FuseV1Options.OnlyLoadAppFromAsar]: true,\r\n    }),\r\n  ],\r\n};\r\n-----\r\n:wq\r\n<\/pre>\n
 <\/p>\n
renderer\u306e\u4f4d\u7f6e\u3068\u540d\u79f0\u304c\u5909\u308f\u3063\u305f\u306e\u3067 index.html \u3092\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n
% cd ~\/electron.my-app\/\r\n% vim index.html\r\n-----\r\n<html>\r\n  <head>\r\n    <meta charset=\"UTF-8\" \/>\r\n    <title>Hello World!<\/title>\r\n  <\/head>\r\n  <body>\r\n    <h1>\ud83d\udc96 Hello World!<\/h1>\r\n    <p>Welcome to your Electron application.<\/p>\r\n    <script type=\"module\" src=\"\/src\/renderer\/index.tsx\"><\/script><\/strong>\r\n  <\/body>\r\n<\/html>\r\n-----\r\n:wq\r\n<\/pre>\n
 <\/p>\n
\u307e\u3060\u30bd\u30fc\u30b9\u81ea\u4f53\u306bReact\u3092\u5c0e\u5165\u3057\u3066\u3044\u307e\u305b\u3093\u304c\u3001\u5ff5\u306e\u305f\u3081\u3053\u306e\u6642\u70b9\u3067\u8d77\u52d5\u3059\u308b\u3053\u3068\u3092\u78ba\u304b\u3081\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n
$ npm start<\/pre>\n
\u6b21\u306b\u30bd\u30fc\u30b9\u3092React\u5316(\u30d9\u30bf\u6253\u3061\u306eHello World\u3092\u5225\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u3057\u3066\u547c\u3073\u51fa\u3059\uff09\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n
Mac\u3068 Electron Forge + React + MUI \u3067PC\u30a2\u30d7\u30ea\u3092\u4f5c\u308b\uff08\u305d\u306e\uff13\uff09<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Mac\u3068 Electron Forge + React + MUI \u3067PC\u30a2\u30d7\u30ea\u3092\u4f5c\u308b\uff08\u305d\u306e\uff11\uff09\u3067\u4f5c\u6210\u3057\u305f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306bReact\u3092\u5c0e\u5165\u3057\u3066\u3044\u304d\u307e\u3059\u3002 $ npm install –save react react-d … \u7d9a\u304d\u3092\u8aad\u3080 Mac\u3068 Electron Forge + React + MUI \u3067PC\u30a2\u30d7\u30ea\u3092\u4f5c\u308b\uff08\u305d\u306e\uff12\uff09<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,19],"tags":[],"class_list":["post-3593","post","type-post","status-publish","format-standard","hentry","category-electron","category-19"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ji0vwl.net\/index.php\/wp-json\/wp\/v2\/posts\/3593","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ji0vwl.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ji0vwl.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ji0vwl.net\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ji0vwl.net\/index.php\/wp-json\/wp\/v2\/comments?post=3593"}],"version-history":[{"count":0,"href":"https:\/\/ji0vwl.net\/index.php\/wp-json\/wp\/v2\/posts\/3593\/revisions"}],"wp:attachment":[{"href":"https:\/\/ji0vwl.net\/index.php\/wp-json\/wp\/v2\/media?parent=3593"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ji0vwl.net\/index.php\/wp-json\/wp\/v2\/categories?post=3593"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ji0vwl.net\/index.php\/wp-json\/wp\/v2\/tags?post=3593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}