什么是 npm？
npm（Node Package Manager）是一个大型的开源软件注册表，其中包含了丰富的前端和后端开发的工具、框架、库等。它是基于 Node.js 平台构建的，通常会随着 Node.js 的安装一同安装。
通过 npm，我们可以轻松地管理项目依赖、升级、发布和分享自己的代码包。
webshopper 简介
webshopper 是一个可以用于 electron 和 nw.js 环境下的桌面客户端包装器，使用它可以方便地构建出一个跨平台的桌面应用。
如何安装和使用 webshopper？
安装
安装 webshopper 很简单，只需要全局安装 webshopper 即可：
npm install -g webshopper
使用
通过 webshopper 命令即可启动应用：
webshopper ./app
其中，./app 是你自己的应用代码目录，如果没有，可以通过 webshopper init 命令新建。
webshopper 的配置
通过 webshopper 配置，可以实现自定义菜单、窗口、打包等功能。
菜单配置
在项目的 package.json 中，通过 menu 配置自定义菜单：
-- -------------------- ---- -------
-
------- -
-
-------- -------
---------- -
-
-------- -------
-------------- --------------
-------- ------------------
---------- --------------------------
---------- -------------------------
--
-
------- -----------
--
-
-------- --------
-------------- --------------
-------- ----------
-
-
--
-
-------- -------
---------- -
-
-------- ------
-------------- --------------
-------- ----------
--
-
-------- -------
-------------- --------------
-------- -----------
--
-
-------- --------
-------------- --------------
-------- ------------
-
-
-
-
-其中，label 表示菜单显示的文字，click 表示点击后执行的命令，accelerator 表示快捷键，visible 和 enabled 分别表示菜单项是否可见和可用。
窗口配置
在项目的 package.json 中，通过 window 配置应用窗口：
-- -------------------- ---- -------
-
--------- -
-------- --- -----
-------- ----
--------- ----
----------- ----
------------ ----
----------- -----
------------ ----
---- ----
---- ----
------------- ------
------------ -----
-------------- ------
--------------- -----
-
-其中，title 表示窗口标题，width 和 height 表示窗口大小，minWidth 和 minHeight 表示窗口的最小大小，maxWidth 和 maxHeight 表示窗口的最大大小，x 和 y 表示窗口的默认位置，fullscreen 表示是否要全屏显示，resizable 表示窗口是否可调整大小，alwaysOnTop 表示窗口是否总是置于顶层，showDevTools 表示是否默认显示开发者工具栏。
打包配置
webshopper 同样支持打包成应用程序或安装包，通过配置 package.json 中的 build 选项来实现：
-- -------------------- ---- -------
-
-------- -
------- --- -----
-------------- --- -----
-------- ------------
---------- --------
------- -----------------
------ ---------
------- -----
------------------- -
------ --------
------- --- ----
--
------ -
----------- -------------------------------------
--
------ -
--------- -------
------- ----------------
-
-
-其中，name 和 productName 分别表示应用的名称，appId 表示应用在打包后的唯一标识，version 表示应用的版本号，icon 表示应用图标，dir 表示打包后的输出目录，asar 表示是否将应用打包成单文件（在 win 系统中表现为一个 .asar 文件，类似于 zip 文件），fileAssociations 表示与应用相关联的文件扩展名及其显示名称，mac 和 win 分别表示针对 Mac 和 Windows 的特定配置，例如 Mac 的分类（用于应用商店识别）和 Windows 的安装包格式等。
总结
通过本文的介绍，你已经了解了 webshopper 的安装、使用、配置及打包等功能，希望可以帮助你更加快速高效地构建出一个优秀的跨平台桌面应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671068dd3466f61ffddf8