文章目录

• 前言
• 基本思路
• 基本使用
• • 安装打包工具
  • 配置打包工具
  • 打包客户端代码
  • 服务端配置网站
  • 配套项目地址
  • 效果视频

前言

前面介绍了 NodeJs 服务器连接数据库 的基本操作，为了满足企业人可以便捷地使用，不必深入理解源代码以及复杂的部署，为此将客户端和服务端打包在一起，通过 Windows 可执行文件来运行项目。

基本思路

利用 pkg 来打包服务端的操作来打包部署客户端以及服务端。

基本使用

安装打包工具

安装服务端的打包工具 pkg：

pnpm install -g pkg

配置打包工具

在项目包配置文件里面，配置 pkg 的基本信息：
package.json

{
	...
	"main": "server.js",
	"bin": "server.js",
	"pkg": {
	    "assets": [ 
	      "dist/**/*",
		  "node_modules/.pnpm/registry.npmmirror.com+@[email protected]/node_modules/open/xdg-open" 
	    ],
	    "targets": [ "node16-win-x64" ],
	    "outputPath": "dist"
	},
	"dependencies": {
		"cors": "^2.8.5",
	    "express": "^4.18.2",
	    "nodemon": "^3.0.2",
	    "tedious": "^16.6.1",
	    ...
	}
}

bin：需要被打包的脚本，即服务端 server.js 脚本文件；
pkg.assets：配置需要打包的资源；
pkg.targets：配置需要打包成的执行文件的平台；
pkg.outputPath：配置需要打包生成执行文件的输出目录；
dependencies：服务端需要用到的依赖项；
main：主模块入口文件；

打包客户端代码

打包客户端代码，会生成到 dist 目录下：

npm run build

服务端配置网站

利用服务端配置网站后，也不会存在跨域的问题，如果需要联动调试的话，也可以进行调试，只不过可能就需要设置一下跨域问题：

const express = require('express');
const path = require('path');
const app= express();
const port = 3000;

// 配置客户端打包页面的访问目录
app.use(express.static(path.join(__dirname, 'dist')));

var server = app.listen(port, () => {
    var host = server.address().address;
    console.info(`http://${host}:${port} 服务器启动成功`);
})

配套项目地址

hjhcos / toptech-node-server，请修改文件 server.js 的数据库配置

效果视频

<iframe id="93bdLiOb-1705557430650" frameborder="0" src="//i2.wp.com/live.csdn.net/v/embed/360377" allowfullscreen="true" data-mediaembed="csdn"></iframe>

NodeJS服务端打包