<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>Node.js on TripleZ&#39;s Blog</title>
    <link>https://blog.triplez.cn/tags/node.js/</link>
    <description>Recent content in Node.js on TripleZ&#39;s Blog</description>
    <generator>Hugo -- gohugo.io</generator>
    <language>zh-cn</language>
    <lastBuildDate>Sun, 12 Nov 2017 10:48:38 +0000</lastBuildDate><atom:link href="https://blog.triplez.cn/tags/node.js/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>How to Pack a Electron app</title>
      <link>https://blog.triplez.cn/posts/pack-electron-app/</link>
      <pubDate>Sun, 12 Nov 2017 10:48:38 +0000</pubDate>
      
      <guid>https://blog.triplez.cn/posts/pack-electron-app/</guid>
      <description>&lt;p&gt;Use electron-packager to create your distribution app packages.&lt;/p&gt;</description>
      <content:encoded><![CDATA[<p>Use electron-packager to create your distribution app packages.</p>
<h2 id="download-the-electron-packager">Download the electron-packager</h2>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-0-1"><a style="outline: none; text-decoration:none; color:inherit" href="#hl-0-1">1</a>
</span><span class="lnt" id="hl-0-2"><a style="outline: none; text-decoration:none; color:inherit" href="#hl-0-2">2</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ npm install electron-packager -g
</span></span><span class="line"><span class="cl">$ npm install electron-packager --save-dev
</span></span></code></pre></td></tr></table>
</div>
</div><h3 id="speed-up-npm-install-in-china">Speed up NPM install in China</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-1-1"><a style="outline: none; text-decoration:none; color:inherit" href="#hl-1-1">1</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ npm install your_package --registry<span class="o">=</span>https://registry.npm.taobao.org
</span></span></code></pre></td></tr></table>
</div>
</div><h2 id="basic-usage">Basic usage</h2>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-2-1"><a style="outline: none; text-decoration:none; color:inherit" href="#hl-2-1">1</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ electron-package ./ --all
</span></span></code></pre></td></tr></table>
</div>
</div><h2 id="speed-up-package-in-china">Speed up package in China</h2>
<p>For the reason that everyone knows, the net speed to AWS is so slow that we cannot wait for it. So we some other options to speed up our progress.</p>
<p>Fortunately, <code>Taobao</code> has a mirror website for <code>electron</code> , we can use this mirror resource to download the package what we need.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-3-1"><a style="outline: none; text-decoration:none; color:inherit" href="#hl-3-1">1</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ <span class="nb">export</span> <span class="nv">ELECTRON_MIRROR</span><span class="o">=</span>https://npm.taobao.org/mirrors/electron/
</span></span></code></pre></td></tr></table>
</div>
</div><h2 id="minimize-the-package">Minimize the package</h2>
<p>Due to the node modules, the package will be so big that you can not easily to distribute them to potential users, so we need to decrease the package size.</p>
<h3 id="ignore-directories">Ignore directories</h3>
<h4 id="node_modules">node_modules</h4>
<p>Usually, the project has a lot of node dependencies, so the <code>node_module</code> directory should be the largest directory in out normal project. So we definitely should ignore it.</p>
<h4 id="git">.git</h4>
<p>Git repository directory, ignore it too.</p>
<h4 id="vscode">.vscode</h4>
<p>Visual Studio Code workspace configuration files, we do not need them to build the application we wanted.</p>
<h4 id="other-unnecessary-directories-and-files">Other unnecessary directories and files</h4>
<p>Such as <code>.gitignore</code>, <code>README.md</code>, <code>LICENSE.md</code></p>
<h3 id="electron">Electron</h3>
<p>You <strong>MUST</strong> add <code>electron</code> to <code>devDependencies</code> before packing your application, or it will stretch the application package larger than you think&hellip;</p>
<h2 id="hide-your-source-code">Hide your source code</h2>
<p>Use the <code>--asar</code> option to hide your source code and resources.</p>
<p><a href="https://github.com/electron/asar">Electron/ASAR</a> README:</p>
<blockquote>
<p>*<em>&ldquo;Asar is a simple extensive archive format, it works like <code>tar</code> that concatenates all files together without compression, while having random access support.&rdquo;</em></p>
</blockquote>
<h2 id="conclusion">Conclusion</h2>
<p>In order to include all the options above, we may splice the following command:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-4-1"><a style="outline: none; text-decoration:none; color:inherit" href="#hl-4-1">1</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">electron-packager . --platform<span class="o">=</span>linux,win32,darwin --arch<span class="o">=</span>ia32,x64 --out<span class="o">=</span>pack/ --overwrite --ignore<span class="o">=</span><span class="se">\&#34;</span><span class="o">(</span>.git<span class="p">|</span>.vscode<span class="p">|</span>node_modules<span class="p">|</span>src<span class="p">|</span>.gitignore<span class="p">|</span>README.md<span class="p">|</span>LICENSE.md<span class="o">)</span><span class="se">\&#34;</span> --asar
</span></span></code></pre></td></tr></table>
</div>
</div><h2 id="common-problems">Common problems</h2>
<h3 id="cannot-load-node-notifier">Cannot load node-notifier</h3>
<p>If you include the npm module <code>node-notifier</code> in your <code>Electron</code> application and use the <code>--asar</code> option while packaging, you may find this error after you try to run your packed app.</p>
<p><a href="https://www.npmjs.com/package/node-notifier#within-electron-packaging">node-notifier &ndash; NPM</a>:</p>
<blockquote>
<p><em>&ldquo;If packaging your Electron app as an <code>asar</code>, you will find node-notifier will fail to load. Due to the way asar works, you cannot execute a binary from within an asar. As a simple solution, when packaging the app into an asar please make sure you <code>--unpack</code> the vendor folder of node-notifier, so the module still has access to the notification binaries. To do this, you can do so by using the following command:&rdquo;</em></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-5-1"><a style="outline: none; text-decoration:none; color:inherit" href="#hl-5-1">1</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">asar pack . app.asar --unpack <span class="s2">&#34;./node_modules/node-notifier/vendor/**&#34;</span>*
</span></span></code></pre></td></tr></table>
</div>
</div></blockquote>
<p>So we need to add <code>--asar-unpack-dir=node_modules/node-notifier/vendor/</code> behind our command.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-6-1"><a style="outline: none; text-decoration:none; color:inherit" href="#hl-6-1">1</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">electron-packager . --platform<span class="o">=</span>linux,win32,darwin --arch<span class="o">=</span>ia32,x64 --out<span class="o">=</span>pack/ --overwrite --ignore<span class="o">=</span><span class="se">\&#34;</span><span class="o">(</span>.git<span class="p">|</span>.vscode<span class="p">|</span>node_modules<span class="p">|</span>src<span class="p">|</span>.gitignore<span class="p">|</span>README.md<span class="p">|</span>LICENSE.md<span class="o">)</span><span class="se">\&#34;</span> --asar --asar-unpack-dir<span class="o">=</span>node_modules/node-notifier/vendor/
</span></span></code></pre></td></tr></table>
</div>
</div><h3 id="cnpm">CNPM</h3>
<p>If you use <code>cnpm</code> to install your dependency packages, it may cause error and the pack is much <a href="https://github.com/electron-userland/electron-packager/issues/752#issuecomment-343727278">larger</a> after using <code>electron-packager</code> to pack your code to distribution files.</p>
<p>I highly recommend that <strong>DO NOT USE <code>CNPM</code></strong> .</p>
<p>To speed up <code>NPM</code> in China, use <code>--registry=https://registry.npm.taobao.org</code> instead.</p>]]></content:encoded>
    </item>
    
  </channel>
</rss>
