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

-4

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

挑战在于，我想用最少的配置\更改将此功能添加到多个其他Web应用程序。使用Web应用程序应该可以轻松使用此插件。我看到的某些挑战是Bootstrap在ExtJs框架中运行不佳&我可能会遇到与其他JavaScript框架类似的问题。

问题：

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

我想，我可以通过一个简单的ReactJs应用程序获得理想的结果，我可以使用网络包进行捆绑。但是这会引入其他的依赖。我想保持简洁的Web应用程序。

来源

2016-11-29 OpenStack

只要我想知道，但这是如何与NodeJS？它是前端还是后端？它是一个Express应用程序吗？解决方案之一是将所有内容都打包在一个单独的html文件（包括css，图像和javascript）中，并从url中读取参数。但是，我可能会得到你的应用程序是错误的。 –

@MathieudeLorimier：我想保持简单，我的意思是，我不想添加额外的依赖。我添加了nodejs来管理包（babel，webpack等）。这个应用程序应该有前端和后端。但我的问题更多的是设计前端。由于这是一款即插即用的应用程序，因此消费者应该可以轻松添加此应用程序。 – OpenStack

好吧，但我看不出如何保持简单的解决方案，而不是将所有资源打包到单个HTML文件中。这不会添加任何依赖关系。你只需要一个gulp/bower/...构建脚本就可以了。过去，我曾经开发过一种移动应用程序，可以将“离线”内容部署到移动设备上，这非常棒。无论如何，您可能需要为您的问题添加更多细节和背景信息。 –

我可以使用Web包或Browserify但我想保持溶液清洁&不想增加不必要的依赖。

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

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

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

来源

2016-12-08 12:56:38 MoeSattler

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

你应该使用像咕噜或一饮而尽
构建工具运行如下所有的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。

来源

2016-12-09 04:30:55 david

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

回答

相关问题