Question

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

面临的挑战是，我希望将此功能添加到多个其他Web应用程序中，并进行最少的配置\更改。消费的Web应用程序应该能够轻松使用此插件。我看到的某些挑战是bootstrap与ExtJs框架和扩展不兼容。我可能会遇到与其他JavaScript框架类似的问题。

问题：

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

我认为，我可以使用简单的ReactJs应用程序获得所需的结果，我可以使用Web包进行捆绑。但这将引入其他依赖。我想保持Web应用程序简洁明了。

Answer 1

我可以使用网络包或Browserify，但我想保持解决方案的清洁和安全;不想添加不必要的依赖。

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

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

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

Answer 2

<强> 1。我该如何打包此应用程序？

您应该使用像grunt或gulp
如果您想将不同文件的数量保持在较低水平，您可以将所有CSS，HTML甚至图像（base64编码）合并到module.js中。理想情况下，您最终只能提供单个文件。

<强> 2。消费者应该能够轻松地使用bundle \ package。只需添加一些参考文献。

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

<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。

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

2 个答案: