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

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

挑战是，我想以最少的配置\更改将此功能添加到多个其他web应用程序中。消费web应用程序应该能够轻松地使用此插件。我看到的某些挑战是，引导不能很好地与ExtJs框架配合使用&我可能会面临与其他JavaScript框架类似的问题

问题：

如何打包此应用程序？

它有一个面板，其中包含第三方插件（用于自动完成和其他功能）、CSS和JavaScript。我可以使用webpack或Browserify，但我想保持解决方案的整洁&不想添加不必要的依赖项

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

我想，我可以通过一个简单的ReactJs应用程序获得想要的结果，我可以使用WebPack打包。但这将引入其他依赖性。我希望web应用程序保持精简和简单

我可以使用webpack或Browserify，但我想保持解决方案的整洁&不想添加不必要的依赖项

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

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

如果您通过npm（JS中事实上的标准）分发它，他们只需定期导入具有正确路径的资源（例如

node\u modules/package/styles.css

）。

---

在npm中，您还可以声明您的属性（您提到jquery，bootstrap）。

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

• 您应该使用grunt或gulp这样的构建工具来缩小所有HTML
• 如果您想保持不同文件的数量较低，可以将所有CSS、HTML甚至图像（base64编码）合并到

  module.js

  中。理想情况下，您可以只交付一个文件

2。消费者应该能够轻松地使用bundle\package&只需添加一些参考资料。

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

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

在使用你的应用程序的网站上，你只需使用

import

关键字添加依赖项：

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

---

阅读更多信息。

我只是想知道，这与NodeJS有什么关系？它是前端还是后端？这是特快申请吗？解决方案之一是将所有内容打包到单个html文件（包括css、图像和javascript）中，并从url读取参数。但我可能会发现你的应用程序做得不对。@MathieudeLorimier:我想让事情保持简单&我的意思是，我不想增加额外的依赖性。我添加nodejs只是为了管理包（babel、webpack等）。此应用程序应具有前端和后端。但我的问题更多的是设计前端。由于这是一个即插即用的应用程序，消费者应该能够轻松地添加此应用程序。好吧，但我不明白除了将所有资源打包到一个html文件中之外，如何使解决方案保持简单。这不会添加任何依赖项。你只需要大口喝一口。。。构建脚本来实现这一点。过去，我曾开发过一款移动应用程序，通过这种方式将“离线”内容部署到移动设备上，非常棒。无论如何，你可能需要在你的问题中添加更多的细节和背景信息。

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