打包基於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的即插即用應用程序

回答

相關問題