打包基于 JavaScript 的即插即用应用程序

Posted 2023-02-22

【中文标题】打包基于 JavaScript 的即插即用应用程序

【英文标题】：Packaging JavaScript based plug and play application

【发布时间】：2017-04-12 23:09:36

【问题描述】：

我正在尝试构建一个即插即用的基于 Web 的应用程序，我应该能够与多个其他 Web 应用程序（使用 AngalurJS\ ExtJS\ ReactJS 等开发）集成。单击按钮，我应该能够启动sliding menu。在这个菜单上，我想添加类似 Twitter 的功能。在菜单的前半部分，我们将有一个文本框（具有自动完成和哈希标签等功能）。后半部分显示一个网格，它将显示已发布的消息。面板将负责获取数据并将其发布到服务器。

挑战在于，我想以最少的配置\更改将此功能添加到多个其他 Web 应用程序。消费网络应用程序应该能够轻松使用这个插件。我看到的某些挑战是 bootstrap 不能很好地与 ExtJs 框架配合使用，而且我可能会在使用其他 javascript 框架时遇到类似的问题。

问题：

How can I package this application? 它有一个带有第三方插件（用于自动完成和其他功能）、CSS 和 JavaScript 的面板。我可以使用 webpack 或 Browserify，但我想保持解决方案干净且不想添加不必要的依赖项。 消费者应该能够轻松使用 bundle\package，只需添加一些引用（如我的 bundle、css 文件、jquery、bootstrap）。

我认为，我可以使用一个简单的 ReactJs 应用程序来获得所需的结果，我可以使用 web pack 捆绑它。但这会引入其他依赖。我想让 Web 应用程序保持精简和简单。

【问题讨论】：

只是我想知道，但这与 NodeJS 有什么关系？它是前端和后端吗？是 Express 应用程序吗？解决方案之一是将所有内容打包在一个 html 文件中（包括 css、图像和 javascript）并从 url 读取参数。但我可能会认为你的应用程序做错了。

@MathieudeLorimier：我想让事情变得简单，我的意思是，我不想添加额外的依赖。我添加 nodejs 只是为了管理包（babel、webpack 等）。这个应用程序应该有前端和后端。但我的问题更多的是设计前端。由于这是一款即插即用的应用程序，消费者应该能够轻松添加此应用程序。

好吧，但我不明白除了将所有资源打包在一个 html 文件中之外，您还能如何保持解决方案的简单性。这不会添加任何依赖项。你只需要一个 gulp/bower/... 构建脚本来实现它。过去，我开发了一个移动应用程序，以这种方式将“离线”内容部署到移动设备，这很棒。无论如何，您可能需要为您的问题添加更多详细信息和背景信息。

【参考方案1】：

我可以使用 webpack 或 Browserify，但我想保持解决方案干净并且不想添加不必要的依赖。

我不明白这个问题。使用 webpack 或 browserfy 只会添加devDependencies。你不会发货的。你的包不会依赖它。 如果你想捆绑它，你将无法避免使用捆绑器。

消费者应该能够轻松地使用 bundle\package，只需添加一些引用（如我的 bundle、css 文件、jquery、bootstrap）。

如果您通过 npm（JS 中的事实标准）分发它，他们只会定期导入具有正确路径的资源（例如 node_modules/package/styles.css）。 在 npm 中，您还可以声明您的 peerDependencies（您提到 jquery、bootstrap）。

【参考方案2】：

1.如何打包此应用程序？

您应该使用诸如 grunt 或 gulp 之类的构建工具来缩小所有 HTML 如果您想减少不同文件的数量，您可以将所有 CSS、HTML 甚至图像（base64 编码）合并到您的 module.js 中。理想情况下，您最终只能交付一个文件。

2。消费者应该能够轻松地使用捆绑包，只需添加一些引用即可。

在这种情况下，他们只需要包含脚本，例如：

<script src="app-module.js"></script>

---

如果您能够使用 EcmaScript 2015，您可能会考虑将您的即插即用应用程序打包到 ES6 模块中。将您的module.js 简单定义为：

export var myNumber = 333
export function myFunction() 
  ...

在使用您的应用的网站上，您只需使用 import 关键字添加依赖项：

import * as service from 'module'
console.log(service.myNumber) // 333

阅读更多关于ES6 Modules的信息。