#NPM 包 electron-extensioner 使用教程
随着 Web 技术的不断发展和 Node.js 生态系统的日益壮大，前端工程师可以通过 NPM 包方便快速地使用各种插件来增强开发体验。
本文介绍的是一个非常实用的前端开发利器：electron-extensioner。electron-extensioner是一个可以让你“一键式”打包 Electron 扩展的工具。
##安装 electron-extensioner
首先，在使用 electron-extensioner 之前，你需要先安装它。使用 NPM 命令来安装：
npm install electron-extensioner
##使用 electron-extensioner
electron-extensioner 的使用非常简单。只需要引入即可：
const { extensioner } = require('electron-extensioner');然后，调用如下方法即可打包 Electron 扩展：
extensioner({
src: 'src/extension',
dest: 'dist'
});这里，我们需要传递两个参数：src 是源文件夹名称，dest 是目标文件夹名称。
值得一提的是，src 文件夹可以包括以下文件：
manifest.json：扩展的配置文件background.js：扩展的后台脚本content.js：扩展的内容脚本popup.html：扩展的弹出式窗口 HTML 文件popup.js：扩展的弹出式窗口 JS 文件icon.png：扩展的图标文件
事实上，electron-extensioner 不仅提供了打包扩展的功能，还提供了很多其他的功能。比如，你可以通过 service 方法来启动 Electron 服务：
const { service } = require('electron-extensioner');
service({
width: 800,
height: 600,
showDevTools: false
});这里的参数和 BrowserWindow 的参数一样。
##示例代码
下面，我来举一个例子，展示如何使用 electron-extensioner 打包一个简单的扩展。首先，我们在项目根目录下创建一个 src 文件夹，并在里面新建一个名为 manifest.json 的文件。
-- -------------------- ---- -------
-
------- --- ------- -----------
---------- --------
-------------- ----- -- - ------ -----------
------------------- --
----------------- -
---------------- ------------
-
-这里，我们定义了一个名为 My Awesome Extension 的扩展，并指定了一个弹出式窗口。
接下来，我们在 src 文件夹中创建一个名为 popup.html 的文件：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------- -----------------
-------
------
---------- -----------
-------
-------这个文件非常简单，只是一个带有标题的 HTML 文件。我们可以在文件中加入任何我们需要的 HTML/CSS/JS 代码。
接着，我们在项目根目录下创建一个 package.json 文件，添加以下内容：
-- -------------------- ---- -------
-
------- -----------------------
---------- --------
---------- -
-------- ------------ ----- --- ------ ------
-------- ------------ --------- ------- --- -------- --- ---------------
--
--------------- -
----------------------- --------
-
-这里，我们添加了两个 script 脚本，一个用于打包扩展，另一个用于启动 Electron 服务。
最后，我们在控制台执行以下命令即可运行：
npm run start
这个扩展应该会在你的浏览器上显示一个简单的弹出式窗口。
##总结
本文介绍了一个非常实用的前端开发工具——electron-extensioner，它可以帮助你快速地打包 Electron 扩展，提高开发效率。
实际上，除了electron-extensioner，还有许多其他的 Electron 工具可以让前端开发更加便捷。如果你对 Electron 或者前端开发工具有兴趣，建议深入了解，并运用到实际开发中，加速自己的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f93238a385564ab7065