完整electron+react项目框架搭建 - Powered by Discuz! Archiver

首页 › React论坛 › 完整electron+react项目框架搭建

石矶娘娘 發表於 2020-3-2 00:31:00

完整electron+react项目框架搭建

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
                     <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"></path>
               </svg>
                                       <h4>electron初始项目搭建案例github；可用作初始化项目</h4>
<h1>1、环境搭建</h1>
<pre><code class="prism language-shell">//初始化项目xxx
npx create-react-app xxx

//安装electron
<span class="token function">npm</span> <span class="token function">install</span> electron --save-dev
</code></pre>
<h5>创建main.js</h5>
<pre><code class="prism language-shell">const <span class="token punctuation">{</span>app,BrowserWindow<span class="token punctuation">}</span> <span class="token operator">=</span> require<span class="token punctuation">(</span><span class="token string">'electron'</span><span class="token punctuation">)</span>

<span class="token keyword">let</span> mainWindow<span class="token punctuation">;</span>

app.on<span class="token punctuation">(</span><span class="token string">'ready'</span>,<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=</span><span class="token operator">></span><span class="token punctuation">{</span>
mainWindow <span class="token operator">=</span> new BrowserWindow<span class="token punctuation">(</span><span class="token punctuation">{</span>
   width:1024,
   height:680,
   webPreferences:<span class="token punctuation">{</span>
         nodeIntegration:true          //是指在render process中可以使用node
   <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
<h5>安装electron-is-dev库，判断是否是开发环境</h5>
<pre><code class="prism language-shell">//安装
cnpm <span class="token function">install</span> electron-is-dev --save-dev

//使用
const isDev <span class="token operator">=</span> require<span class="token punctuation">(</span><span class="token string">'electron-is-dev'</span><span class="token punctuation">)</span>

const urlLocation <span class="token operator">=</span> isDev ? <span class="token string">'http://localhost:3000'</span><span class="token keyword">:</span><span class="token string">'null'</span><span class="token punctuation">;</span>
mainWindow.loadURL<span class="token punctuation">(</span>urlLocation<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<blockquote>
<p>注意：isDev判断是否为开发环境；</p>
<ul>
<li>开发环境就loadURL为localhost:3000</li>
<li>非开发环境：加载打包之后的静态文件，这里先留存之后再修改</li>
</ul>
</blockquote>
<h5>修改package.json</h5>
<pre><code class="prism language-shell">//添加main.js
<span class="token string">"main"</span><span class="token keyword">:</span><span class="token string">"main.js"</span>,

//添加electron启动script
<span class="token string">"dev"</span><span class="token keyword">:</span><span class="token string">"electron ."</span>
</code></pre>
<h5>查看electron环境</h5>
<pre><code class="prism language-shell">//开启react的localhost:3000
<span class="token function">npm</span> start

//开启electron
cnpm run dev
</code></pre>
<h5>concurrently同步</h5>
<p>指的是npm start和electron .同时进行</p>
<pre><code class="prism language-shell">//安装
cnpm <span class="token function">install</span> concurrently --save-dev
</code></pre>
<h5>wait-on等待命令运行完</h5>
<p>等待react的localhost:3000运行起来之后才去开始electron .</p>
<pre><code class="prism language-shell">//安装
cnpm <span class="token function">install</span> wait-on --save-dev

//package.json中将script的dev改成
<span class="token string">"dev"</span><span class="token keyword">:</span> <span class="token string">"concurrently \"wait-on http://localhost:3000 && electron .\" \"npm start\""</span>
</code></pre>
<blockquote>
<p>注意：concurrently是让两个命令同时执行；wait-on是等待localhost:3000加载完成之后再执行<code>electron .</code>，直接<code>npm run dev</code>就可以同时开启浏览器和electron的GUI了</p>
</blockquote>
<h5>cross-env控制系统不开启浏览器中的localhost:3000</h5>
<pre><code class="prism language-shell">//安装
cnpm <span class="token function">install</span> cross-dev

//修改package.json
<span class="token string">"dev"</span><span class="token keyword">:</span> <span class="token string">"concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\""</span>
</code></pre>
<blockquote>
<p>注意：之后只开启electron程序，并不会开启localhost:3000</p>
</blockquote>
<h1>2、配置打包</h1>
<h5>electron-builder打包</h5>
<pre><code class="prism language-shell">//安装electron-builder
cnpm <span class="token function">install</span> electron-builder --save-dev

//安装webpack-cli
cnpm <span class="token function">install</span> webpack-cli --save-dev
</code></pre>
<pre><code class="prism language-shell">//package.json中添加相关build配置
<span class="token string">"build"</span><span class="token keyword">:</span> <span class="token punctuation">{</span>
<span class="token string">"appId"</span><span class="token keyword">:</span> <span class="token string">"smileyqp"</span>,
<span class="token string">"productName"</span><span class="token keyword">:</span> <span class="token string">"smileyqp"</span>,
<span class="token string">"copyright"</span><span class="token keyword">:</span> <span class="token string">"Copyright © 2019 <span class="token variable">${author}</span>"</span>,
<span class="token string">"files"</span><span class="token keyword">:</span> <span class="token punctuation">[</span>
   <span class="token string">"build/**/*"</span>,
   <span class="token string">"node_modules/**/*"</span>,
   <span class="token string">"package.json"</span>
<span class="token punctuation">]</span>,
<span class="token string">"directories"</span><span class="token keyword">:</span> <span class="token punctuation">{</span>
   <span class="token string">"buildResources"</span><span class="token keyword">:</span> <span class="token string">"assets"</span>
<span class="token punctuation">}</span>,
<span class="token string">"extraMetadata"</span><span class="token keyword">:</span> <span class="token punctuation">{</span>
   <span class="token string">"main"</span><span class="token keyword">:</span> <span class="token string">"./build/main.js"</span>
<span class="token punctuation">}</span>,
<span class="token string">"extends"</span><span class="token keyword">:</span> null,
<span class="token string">"mac"</span><span class="token keyword">:</span> <span class="token punctuation">{</span>
   <span class="token string">"category"</span><span class="token keyword">:</span> <span class="token string">"public.app-category.productivity"</span>,
   <span class="token string">"artifactName"</span><span class="token keyword">:</span> <span class="token string">"<span class="token variable">${productName}</span>-<span class="token variable">${version}</span>-<span class="token variable">${arch}</span>.<span class="token variable">${ext}</span>"</span>
<span class="token punctuation">}</span>,
<span class="token string">"dmg"</span><span class="token keyword">:</span> <span class="token punctuation">{</span>
   <span class="token string">"background"</span><span class="token keyword">:</span> <span class="token string">"assets/smileyqp.jpg"</span>,
   <span class="token string">"icon"</span><span class="token keyword">:</span> <span class="token string">"assets/icon.icns"</span>,
   <span class="token string">"iconSize"</span><span class="token keyword">:</span> 100,
   <span class="token string">"contents"</span><span class="token keyword">:</span> <span class="token punctuation">[</span>
   <span class="token punctuation">{</span>
      <span class="token string">"x"</span><span class="token keyword">:</span> 380,
      <span class="token string">"y"</span><span class="token keyword">:</span> 280,
      <span class="token string">"type"</span><span class="token keyword">:</span> <span class="token string">"link"</span>,
      <span class="token string">"path"</span><span class="token keyword">:</span> <span class="token string">"/Applications"</span>
   <span class="token punctuation">}</span>,
   <span class="token punctuation">{</span>
      <span class="token string">"x"</span><span class="token keyword">:</span> 110,
      <span class="token string">"y"</span><span class="token keyword">:</span> 280,
      <span class="token string">"type"</span><span class="token keyword">:</span> <span class="token string">"file"</span>
   <span class="token punctuation">}</span>
   <span class="token punctuation">]</span>,
   <span class="token string">"window"</span><span class="token keyword">:</span> <span class="token punctuation">{</span>
   <span class="token string">"width"</span><span class="token keyword">:</span> 500,
   <span class="token string">"height"</span><span class="token keyword">:</span> 500
   <span class="token punctuation">}</span>
<span class="token punctuation">}</span>,
<span class="token string">"win"</span><span class="token keyword">:</span> <span class="token punctuation">{</span>
   <span class="token string">"target"</span><span class="token keyword">:</span> <span class="token punctuation">[</span>
   <span class="token string">"msi"</span>,
   <span class="token string">"nsis"</span>
   <span class="token punctuation">]</span>,
   <span class="token string">"icon"</span><span class="token keyword">:</span> <span class="token string">"assets/icon.ico"</span>,
   <span class="token string">"artifactName"</span><span class="token keyword">:</span> <span class="token string">"<span class="token variable">${productName}</span>-Web-Setup-<span class="token variable">${version}</span>.<span class="token variable">${ext}</span>"</span>,
   <span class="token string">"publisherName"</span><span class="token keyword">:</span> <span class="token string">"unity-drive"</span>
<span class="token punctuation">}</span>,
<span class="token string">"nsis"</span><span class="token keyword">:</span> <span class="token punctuation">{</span>
   <span class="token string">"allowToChangeInstallationDirectory"</span><span class="token keyword">:</span> true,
   <span class="token string">"oneClick"</span><span class="token keyword">:</span> false,
   <span class="token string">"perMachine"</span><span class="token keyword">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>,
<span class="token string">"eslintConfig"</span><span class="token keyword">:</span> <span class="token punctuation">{</span>
<span class="token string">"extends"</span><span class="token keyword">:</span> <span class="token string">"react-app"</span>
<span class="token punctuation">}</span>,
<span class="token string">"browserslist"</span><span class="token keyword">:</span> <span class="token punctuation">{</span>
<span class="token string">"production"</span><span class="token keyword">:</span> <span class="token punctuation">[</span>
   <span class="token string">">0.2%"</span>,
   <span class="token string">"not dead"</span>,
   <span class="token string">"not op_mini all"</span>
<span class="token punctuation">]</span>,
<span class="token string">"development"</span><span class="token keyword">:</span> <span class="token punctuation">[</span>
   <span class="token string">"last 1 chrome version"</span>,
   <span class="token string">"last 1 firefox version"</span>,
   <span class="token string">"last 1 safari version"</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>,

</code></pre>
<pre><code class="prism language-shell">/** webpack配置
** 1、项目根目录文件下touch一个webpack.config.js配置文件
** 2、写相关配置并
**3、package.json中添加webpack打包命令<span class="token string">"buildMain"</span><span class="token keyword">:</span> <span class="token string">"webpack"</span>,
/**

const path <span class="token operator">=</span> require<span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>

module.exports <span class="token operator">=</span> <span class="token punctuation">{</span>
target: <span class="token string">'electron-main'</span>,
entry: <span class="token string">'./main.js'</span>,
output: <span class="token punctuation">{</span>
path: path.resolve<span class="token punctuation">(</span>__dirname, <span class="token string">'./build'</span><span class="token punctuation">)</span>,
filename: <span class="token string">'main.js'</span>
<span class="token punctuation">}</span>,
node: <span class="token punctuation">{</span>
__dirname: <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<pre><code class="prism language-shell">//package.json中添加相关打包命令
<span class="token string">"buildMain"</span><span class="token keyword">:</span> <span class="token string">"webpack"</span>,
<span class="token string">"pack"</span><span class="token keyword">:</span> <span class="token string">"electron-builder --dir"</span>,
<span class="token string">"dist"</span><span class="token keyword">:</span> <span class="token string">"electron-builder"</span>,
<span class="token string">"prerelease"</span><span class="token keyword">:</span> <span class="token string">"npm run build && npm run buildMain"</span>,
<span class="token string">"prepack"</span><span class="token keyword">:</span> <span class="token string">"npm run build && npm run buildMain"</span>,
<span class="token string">"predist"</span><span class="token keyword">:</span> <span class="token string">"npm run build && npm run buildMain"</span>

</code></pre>
<pre><code class="prism language-shell"> //修改main.js中的urlLocation不是开发环境的情况
const urlLocation <span class="token operator">=</span> isDev ? <span class="token string">'http://localhost:3000'</span> <span class="token keyword">:</span> <span class="token variable"><span class="token variable">`</span>file://$<span class="token punctuation">{</span>path.join<span class="token punctuation">(</span>__dirname, <span class="token string">'./index.html'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token variable">`</span></span>
</code></pre>
<blockquote>
<p>打包：打包命令<code>sudo npm run dist</code>打包成可执行文件（mac的可执行文件在dist/mac下面）；<code>sudo npm run pack</code>打包成安装后的文件夹；</p>
</blockquote>
<blockquote>
<p>注意：打包配置过程中可能会出现一系列问题；配置过程中需要注意相关版本，会导致错误；以及build里面的icon路径文件不存在也会导致打包出错。</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/smileyqp/p/12675222.html

頁: [1]

查看完整版本: 完整electron+react项目框架搭建