【nw.js】5分钟将Vue和React代码打包成PC/Mac桌面应用

阿四
813 阅读3分钟

大家好，这里是不怎么会写代码的阿四，今天来分享一下如何快速将将Vue和React代码打包成PC/Mac桌面应用

👉🏻 🔗视频讲解请看这里～ 👈🏻

1 什么是 🧭 nw.js

🔗官网：nwjs.io/

NW.js 是一个强大的框架，能够将你的网页项目（HTML、CSS、JavaScript）快速打包成独立的桌面应用程序。简单来说，它就是为你的网页"套上一层本地应用的外壳"，让用户无需浏览器即可直接运行——既保留了Web开发的便捷性，又获得了桌面应用的体验。

如果你的目标只是为网页快速创建一个轻量级的本地运行环境，NW.js 无疑是最优解。它上手极快，几分钟就能完成基础打包，相比庞大的 Electron 更加轻巧灵活，非常适合自用工具或需要快速原型开发的场景。

2 快速了解和上手

强烈推荐B站大佬 呆呆の南瓜 （NW.js 老玩家），他也是我 nw 的启蒙（一年半前看过他的视频）

推荐入门视频：NW.js基础#1：应用构成、启动方式、开发环境

3 文档介绍

🔗nw-builder官方文档：github.com/nwutils/nw-…

打包脚本参考：

不推荐用命令行的方式去打包，虽然可以但是很繁琐，且目前是nw-builder最新已经是v4版本，chatgpt回复的基本都是基于 v3的（导致我一直踩坑），而v3和v4相关的api 使用变化很大，如果是使用v4个人推荐直接使用js脚本体验更佳

4 实操

这里我以vue创建的模板项目作为演示，直接 pnpm build 打包出 dist 目录

  1. 安装nw和 nw-builder：pnpm add nw nw-builder -—save-dev

  2. 编写打包脚本：具体可以参考🔗官方库的脚本 根据官方代码根据自己的项目改写一下，新建一个打包脚本(我放在nw-builder/win.js)

    // nw-build/win.js
import nwbuild from 'nw-builder';

await nwbuild({
  mode: 'build',
  flavor: 'sdk',
  platform: 'win',
  arch: 'x64',
  srcDir: './dist',  // 指定需要打包的应用程序目录
  cacheDir: './node_modules/nw',
  outDir: './nw-output/win/demoApp',  // 输出目录
  glob: false,
  logLevel: 'debug',
  app: {
    name: 'Demo',
    /* File path of icon from where it is copied. */
    icon: './dist/favicon.ico',
    version: '0.0.0',
    comments: 'Diagnostic information',
    company: 'NW.js Utilities',
    fileDescription: 'This is a demo app to test nw-builder functionality',
    fileVersion: '0.0.0',
    internalName: 'Demo',
    legalCopyright: 'Copyright (c) 2024 NW.js Utilities',
    originalFilename: 'Demo',
    productName: 'Demo',
    productVersion: '0.0.0',
  }
});

console.log('\n✅window打包完成');

    (打包 macOS 应用同理)

    // nw-build/osx.js
import nwbuild from 'nw-builder';

await nwbuild({
  mode: 'build',
  flavor: 'sdk',
  platform: 'osx',
  srcDir: './dist',  // 指定需要打包的应用程序目录
  cacheDir: './node_modules/nw',
  outDir: './nw-output/osx/demoApp',  // 输出目录
  glob: false,
  logLevel: 'debug',
  app: {
    name: 'Demo',
    /* File path of icon from where it is copied. */
    icon: './dist/favicon.ico',
    LSApplicationCategoryType: 'public.app-category.utilities',
    CFBundleIdentifier: 'io.nwutils.demo',
    CFBundleName: 'Demo',
    CFBundleDisplayName: 'Demo',
    CFBundleSpokenName: 'Demo',
    CFBundleVersion: '0.0.0',
    CFBundleShortVersionString: '0.0.0',
    NSHumanReadableCopyright: 'Copyright (c) 2024 NW.js Utilities',
    NSLocalNetworkUsageDescription: 'Demo requires access to network to showcase its capabilities',
  }
});

console.log('\n✅mac打包完成');

  3. 配置好 package.json。需要打包的文件夹根目录下一定要有一个package.json文件，且配置好 main 和 window 。

    比如：我需要将 vue 打包的 dist 目录用 nw 打包成应用，那么 dist 目录必须包含一个package.json 文件(手动创建一下即可)，且至少包含下面内容

    // dist/package.json
{
  "name": "demoApp",
  "version": "0.0.0",
  "main": "index.html",  // ✳️ 指定 nw 的入口html文件（必须）
  "window": {    // 桌面端窗口相关属性（必须）
    "title": "随便写的",
    "icon": "./favicon.ico",
    "width": 1280,
    "height": 720,
    "min_width": 1280,
    "min_height": 720,
    "toolbar": false,
    "frame": true,   // 是否显示边框
    "fullscreen": false,   // 是否全屏
    "resizable": true   // 窗口大小可调节
  },
}

  4. 需要打包的时候，直接执行命令 node ./nw-build/win.js（mac是osx.js)，就可以打包完成 image.png

尝试去本地双击exe程序运行一下： image.png

🥳完美～

avatar
文章
阅读
粉丝