<?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/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>Pkg｜林鼎淵 Dean Lin</title>
    <link>https://deanlin.net/tags/pkg/</link>
    <image><url>https://deanlin.net/images/author_hu_aa256fc934e9a932.jpg</url><title>Pkg｜林鼎淵 Dean Lin</title><link>https://deanlin.net/tags/pkg/</link><width>144</width><height>144</height></image>
    <description>林鼎淵（Dean Lin）的部落格：生成式 AI 企業內訓講師、外商資安公司軟體專家、7 本書作者。400 多篇文章用白話分享生成式 AI 實戰、Claude Code 與 Vibe Coding 教學、團隊合作與職場成長。</description>
    <generator>Hugo</generator>
    <language>zh-tw</language>
    <copyright>© 2020–2026 林鼎淵 Dean Lin</copyright>
    <lastBuildDate>Fri, 05 Mar 2021 17:17:32 +0800</lastBuildDate>
    <atom:link href="https://deanlin.net/tags/pkg/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>把 Node.js 專案打包成執行檔，讓朋友無須安裝環境就能暢快體驗 — pkg的介紹以及實際範例分享</title>
      <link>https://deanlin.net/blog/202103/package-nodejs-app-with-pkg/</link>
      <pubDate>Fri, 05 Mar 2021 17:17:32 +0800</pubDate>
      <guid>https://deanlin.net/blog/202103/package-nodejs-app-with-pkg/</guid>
      <dc:creator>林鼎淵</dc:creator>
      <category>技術教學</category>
      <description>如果你是一個很常寫 side project 的人，你一定遇到過想跟朋友炫耀自己完成的 side project；但卻因為雙方電腦環境不同而無法炫耀的問題🤣，今天跟各位介紹一款打包 node 專案成為執行檔的工具 — 『pkg』，同時佐以我過去分享過的 side…</description>
      <media:content url="https://deanlin.net/blog/202103/package-nodejs-app-with-pkg/images/package-nodejs-app-with-pkg-og_hu_71a9916a45d3280.jpg" medium="image" type="image/jpeg" width="1200" height="675" />
      <content:encoded><![CDATA[<p>如果你是一個很常寫 side project 的人，你一定遇到過想跟朋友炫耀自己完成的 side project；但卻因為雙方電腦環境不同而無法炫耀的問題🤣，今天跟各位介紹一款打包 node 專案成為執行檔的工具 — 『pkg』，同時佐以我過去分享過的 side project — 『透過爬蟲讓 Airtable 管理你的 Medium 文章』作為此工具的驗證。</p>
<p><img src="https://deanlin.net/blog/202103/package-nodejs-app-with-pkg/images/package-nodejs-app-with-pkg-01.webp" width="1400" height="784" alt="把 Node.js 專案打包成執行檔，讓朋友無須安裝環境就能暢快體驗 — pkg的介紹以及實際範例分享（圖 1）" fetchpriority="high" decoding="async"></p>
<pre tabindex="0"><code>一、打包工具 pkg
  ➤ 安裝
  ➤ pkg 打包參數說明
  ➤ package.json 參數說明
二、實際範例展示
  ➤ package.json 參數設定
  ➤ 產生執行檔
  ➤ 執行上可能遇到的問題
  ➤ 搭配環境變數執行的方式
</code></pre><h2 id="一打包工具-pkg">一、打包工具 pkg<a class="h-anchor" href="#%e4%b8%80%e6%89%93%e5%8c%85%e5%b7%a5%e5%85%b7-pkg" aria-label="這個段落的連結"></a></h2>
<h3 id="-安裝">安裝<a class="h-anchor" href="#-%e5%ae%89%e8%a3%9d" aria-label="這個段落的連結"></a></h3>
<p>全局安裝，讓每個 Node.js 專案都能使用</p>
<div class="highlight"><pre tabindex="0" style="color:#e6edf3;background-color:#0d1117;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>npm install -g pkg
</span></span></code></pre></div><h3 id="-pkg-打包參數說明">pkg 打包參數說明<a class="h-anchor" href="#-pkg-%e6%89%93%e5%8c%85%e5%8f%83%e6%95%b8%e8%aa%aa%e6%98%8e" aria-label="這個段落的連結"></a></h3>
<p>安裝完後輸入 <code>pkg -h</code> 會顯示他能用的打包參數，下面說明常用的：</p>
<ul>
<li>-t：目標打包給哪個系統用的(Linux, macOS and Windows)，如未設定會產生 3 個檔案</li>
<li>-c：打包會參考 package.json 或是其他 json 檔案</li>
<li>-o：檔案輸出名稱</li>
</ul>
<p><img src="https://deanlin.net/blog/202103/package-nodejs-app-with-pkg/images/package-nodejs-app-with-pkg-02.webp" width="701" height="558" alt="pkg 打包參數說明（圖 2）" loading="lazy" decoding="async"></p>
<h3 id="-packagejson-參數說明">package.json 參數說明<a class="h-anchor" href="#-packagejson-%e5%8f%83%e6%95%b8%e8%aa%aa%e6%98%8e" aria-label="這個段落的連結"></a></h3>
<div class="highlight"><pre tabindex="0" style="color:#e6edf3;background-color:#0d1117;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{
</span></span><span style="display:flex;"><span>    <span style="color:#7ee787">&#34;pkg&#34;</span>: {
</span></span><span style="display:flex;"><span>        <span style="color:#7ee787">&#34;scripts&#34;</span>: [
</span></span><span style="display:flex;"><span>            <span style="color:#a5d6ff">&#34;build/**/*.js&#34;</span><span style="color:#8b949e;font-style:italic">//需要打包的其他js文件
</span></span></span><span style="display:flex;"><span>        ],
</span></span><span style="display:flex;"><span>        <span style="color:#7ee787">&#34;assets&#34;</span>: [
</span></span><span style="display:flex;"><span>            <span style="color:#a5d6ff">&#34;dist/**/*&#34;</span><span style="color:#8b949e;font-style:italic">//靜態文件目錄
</span></span></span><span style="display:flex;"><span>        ]
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><h2 id="二實際範例展示">二、實際範例展示<a class="h-anchor" href="#%e4%ba%8c%e5%af%a6%e9%9a%9b%e7%af%84%e4%be%8b%e5%b1%95%e7%a4%ba" aria-label="這個段落的連結"></a></h2>
<blockquote>
<p>以下範例的原始碼：<a href="https://github.com/dean9703111/medium_to_airtable">https://github.com/dean9703111/medium_to_airtable</a></p>
</blockquote>
<p>有時你設計了一個很有趣的功能，但如果他的前置作業太麻煩，非相關領域的人沒法無腦操作時就會阻礙他的推廣；相反如果他毫無使用門檻就會很多人願意嘗試看看。</p>
<p>這裏我就使用之前分享的 side project — 『透過爬蟲讓 Airtable 管理你的 Medium 文章』一步步說明如何操作。</p>
<h3 id="-packagejson-參數設定">package.json 參數設定<a class="h-anchor" href="#-packagejson-%e5%8f%83%e6%95%b8%e8%a8%ad%e5%ae%9a" aria-label="這個段落的連結"></a></h3>
<ul>
<li><strong>撰寫 scripts</strong>：記得不要去死背套件指令，需要記憶的事情交給電腦就好。這裏我新增了一個『build』的指令，他會以 main.js 作為入口檔，依據 package.json 的設定產生一個給 macOS 使用的執行檔。</li>
<li><strong>設定 pkg</strong>：把『node_modeles』的資料夾全部視為靜態檔即可</li>
</ul>
<div class="highlight"><pre tabindex="0" style="color:#e6edf3;background-color:#0d1117;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{
</span></span><span style="display:flex;"><span><span style="color:#f85149">...</span>
</span></span><span style="display:flex;"><span>  <span style="color:#7ee787">&#34;scripts&#34;</span>: {
</span></span><span style="display:flex;"><span>    <span style="color:#7ee787">&#34;build&#34;</span>: <span style="color:#a5d6ff">&#34;pkg main.js -t node12-macos-x64 -c package.json&#34;</span>
</span></span><span style="display:flex;"><span>  },
</span></span><span style="display:flex;"><span>  <span style="color:#7ee787">&#34;pkg&#34;</span>: {
</span></span><span style="display:flex;"><span>    <span style="color:#7ee787">&#34;assets&#34;</span>: [
</span></span><span style="display:flex;"><span>      <span style="color:#a5d6ff">&#34;node_modules/**/*&#34;</span>
</span></span><span style="display:flex;"><span>    ]
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span><span style="color:#f85149">...</span>
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><h3 id="-產生執行檔">產生執行檔<a class="h-anchor" href="#-%e7%94%a2%e7%94%9f%e5%9f%b7%e8%a1%8c%e6%aa%94" aria-label="這個段落的連結"></a></h3>
<p>在上一步我們寫好 scripts 後可以用如下指令產生執行檔：</p>
<ol>
<li>使用 npm：<code>npm run build</code></li>
<li>使用 yarn：<code>yarn build</code></li>
</ol>
<p><img src="https://deanlin.net/blog/202103/package-nodejs-app-with-pkg/images/package-nodejs-app-with-pkg-03.webp" width="1350" height="188" alt="產生執行檔（圖 3）" loading="lazy" decoding="async"></p>
<p>如果沒有特別指定檔案產生的位置就會出現在資料夾的根目錄喔～</p>
<p><img src="https://deanlin.net/blog/202103/package-nodejs-app-with-pkg/images/package-nodejs-app-with-pkg-04.webp" width="488" height="746" alt="產生執行檔（圖 4）" loading="lazy" decoding="async"></p>
<h3 id="-執行上可能遇到的問題">執行上可能遇到的問題<a class="h-anchor" href="#-%e5%9f%b7%e8%a1%8c%e4%b8%8a%e5%8f%af%e8%83%bd%e9%81%87%e5%88%b0%e7%9a%84%e5%95%8f%e9%a1%8c" aria-label="這個段落的連結"></a></h3>
<blockquote>
<p>你可以直接下載macOS的執行檔玩玩看：<a href="https://github.com/dean9703111/medium_to_airtable/raw/master/app/medium-to-airtable">https://github.com/dean9703111/medium_to_airtable/raw/master/app/medium-to-airtable</a></p>
</blockquote>
<p>只要用 Terminal 前往檔案資料夾的位置，輸入 <code>./medium-to-airtable</code> 即可執行，但應該會遇到如下錯誤：</p>
<p><img src="https://deanlin.net/blog/202103/package-nodejs-app-with-pkg/images/package-nodejs-app-with-pkg-05.webp" width="800" height="308" alt="執行上可能遇到的問題（圖 5）" loading="lazy" decoding="async"></p>
<p>回去看程式碼會發現錯誤的原因是因為無法讀取 .env 的環境變數</p>
<p><img src="https://deanlin.net/blog/202103/package-nodejs-app-with-pkg/images/package-nodejs-app-with-pkg-06.webp" width="845" height="400" alt="執行上可能遇到的問題（圖 6）" loading="lazy" decoding="async"></p>
<h3 id="-搭配環境變數執行的方式">搭配環境變數執行的方式<a class="h-anchor" href="#-%e6%90%ad%e9%85%8d%e7%92%b0%e5%a2%83%e8%ae%8a%e6%95%b8%e5%9f%b7%e8%a1%8c%e7%9a%84%e6%96%b9%e5%bc%8f" aria-label="這個段落的連結"></a></h3>
<p>所以我們只需要在執行檔案前輸入原本設定在 .env 檔的資料就能夠順利執行：</p>
<pre tabindex="0"><code>ENV1=xxx ENV2=yyy ENV3=zzz ./execute_file
</code></pre><p>以這個 side-project 來說會長這個樣子（參數要怎麼填請<a href="https://deanlin.net/blog/202101/medium-to-airtable-crawler-part-2/">參考這篇文章</a>）：</p>
<pre tabindex="0"><code>MEDIUM_PAGE=&#34;https://medium.com/你的網頁&#34; SHOW_BROWSER=false AIRTABLE_API_KEYKEY=&#39;你申請的api&#39; AIRTABLE_BASE=&#39;airtable的id&#39; ./medium-to-airtable
</code></pre><p>然後就可以順利執行嚕～</p>
<p><img src="https://deanlin.net/blog/202103/package-nodejs-app-with-pkg/images/package-nodejs-app-with-pkg-07.webp" width="1285" height="395" alt="搭配環境變數執行的方式（圖 7）" loading="lazy" decoding="async"></p>
<pre tabindex="0"><code>如果你對這個專案有興趣可參考相關系列文章：
➤ 透過爬蟲讓 Airtable 管理你的 Medium 文章(上) — 遇到需求時的分析以及執行步驟
➤ 透過爬蟲讓 Airtable 管理你的 Medium 文章(下) — 如何使用這個工具
➤ 透過爬蟲讓 Airtable 管理你的 Medium 文章(補充篇) — 文章字數統計
</code></pre><hr>
<blockquote class="pullquote"><p>認真說這個打包工具比我想像的還要神，而且使用起來也沒什麼難度，如果手上剛好有熱騰騰的 side-project 趕快用這個套件來炫耀一波吧！</p>
</blockquote>
]]></content:encoded>
    </item>
  </channel>
</rss>
