node打包工具Pkg（詳細教學）

下面我就為大家分享一篇基於node打包執行檔工具_Pkg使用心得分享，具有很好的參考價值，希望對大家有幫助。

專案位址

這個專案很神奇，直接將node.js專案打包成windows可以直接執行的exe檔（也支援FreeBSD、linux、macos、arm系統），甚至不需要安裝Node.js，且無須修改你專案中的任何程式碼！

先安裝pkg

npm install -g pkg

然後在專案目錄下執行

pkg entrance.js

即可打包linux,macos,win3個平台的可執行檔。 entrance.js為你node專案的入口檔。

如果只想打包windows下的exe，則加上-t參數。 win即為打包成windows平台下的exe文件，具體可選參數參見項目目錄

pkg -t win entrance.js

稍等片刻後項目目錄下就會產生打包好的entrance.exe文件。

pkg會自動從入口檔案開始尋找依賴的檔案並全數打包進去，無須修改專案裡的任何程式碼。

其他

pkg可以依照package.json下的設定打包，預設入口檔案為bin所指向的檔案。

執行

pkg .

或是

pkg package.json

即可自動依照package.json的設定打包。

//package.json
{
 //其他配置项
 "bin": "service.js",//入口文件
 "pkg": {
 "scripts": [
  "build/**/*.js"//需要打包进来的其他js文件，可添加多个
 ],
 "assets": [
  "dist/**/*"//静态文件的目录，可添加多个
 ]
 }
}

注意：靜態檔案需要在專案中將檔案的參考換成

path.join(__dirname, 'dist')

的形式，才可以正常打包，否則可能會讀取不到。

範例

使用vue-cli建立項目，並使用npm run build將你的專案編譯產生靜態檔案到dist目錄下。這些都是vue-cli自帶的內容，不再贅述。

在專案目錄下新建一個service.js文件，並添加以下程式碼，在本地起一個express靜態伺服器，使你能夠在本地訪問你的網站（部署到線上也是類似）

//service.js
const express = require('express');
const app = express();
const path = require('path');
 
app.use(express.static(path.join(__dirname, 'dist')));//注意这里使用path.join(__dirname, 'dist')而不是'dist'，虽然在命令行中执行起来效果是一样的，不过pkg打包会无法识别到dist目录
 
var server = app.listen(8081, function () {
 var host = server.address().address
 var port = server.address().port
 console.log(`AIbuy agents server start successfully on http://${host}:${port}`)
})

此時你可以在控制台執行

node service.js

來啟動你的伺服器了，啟動完成後，瀏覽器訪問http://localhost:8081/即可查看你的網站。

接下來我們使用將service.js和dist目錄打包成一個exe文件，方便他人使用

先安裝pkg

npm install -g pkg

然後修改package.json，新增bin（如果不是service.js的話）和pkg項目

{
 //其他配置项
 "bin": "service.js",//指定入口文件
 "pkg": {
 "assets": [
  "dist/**/*"//指定要打包的静态文件目录
 ]
 }
}

然後在專案目錄下執行

pkg -t win package.json

完成後即產生一個exe文件，雙擊啟動即相當於執行node service.js，然後你瀏覽器裡（http://localhost:8081/）就能存取打包好的項目了！也不需要事先安裝node，給老闆示範很方便有木頭！

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

使用vue less如何實作簡單換膚功能

使用angular、react和vue如何實現相同的面試題組件

利用jQuery實作捲動到底部時自動載入

#在Angular2.0如何實作modal對話框

#在JS中如何實現運動緩衝效果（詳細教學）

以上是node打包工具Pkg（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！