パッケージ化JavaScriptベースのプラグアンドプレイアプリケーション

Question

プラグインを作成し、複数の他のWebアプリケーション（AngalurJS \ ExtJS \ ReactJSなどを使用して開発されたもの）と統合できるWebベースのアプリケーションを作成しようとしています。ボタンをクリックすると、sliding menuを起動できるはずです。このメニューでは、Twitterのような機能を追加したいと思います。メニューの前半にテキストボックス（オートコンプリート&ハッシュタグなどの機能があります）があります。後半にはすでに投稿されたメッセージを表示する鳥が表示されます。パネルは、サーバーへのデータの取得および送信を担当します。

難しいのは、設定を変更して複数の他のWebアプリケーションにこの機能を追加したいということです。消費するウェブアプリケーションはこのプラグインを簡単に使用できるはずです。私が見るいくつかの課題は、ブートストラップがExtJsフレームワークでうまく動かないことです。&他のJavaScriptフレームワークで同様の問題に直面する可能性があります。

質問：それは（オートコンプリートのため&その他の機能）のサードパーティ製のプラグイン、CSS & JavaScriptでパネルを持っている

1. How can I package this application?。私はWeb PackまたはBrowserifyを使用することができますが、私は解決策を清潔に保つために&は不要な依存関係を追加したくありません。
2. コンシューマは、参考文献（マイバンドル、cssファイル、jquery、ブートストラップなど）を追加するだけで、バンドル\パッケージを簡単に&で使用できるようになります。

私は、ウェブパックを使ってバンドルできる単純なReactJsアプリで希望の結果を得ることができると思います。しかしこれは他の依存関係を導入するでしょう。私は、Webアプリケーションを軽くてシンプルに保ちたい。

Answer 1

私はWebパックまたはBrowserifyを使用できますが、解決策をきれいに保つために、&は不要な依存関係を追加したくありません。

私はこの問題を理解していません。 webpackまたはbrowserfyを使用すると、devDependenciesが追加されます。あなたはそれを出荷しません。パッケージはそれに依存しません。 バンドルしたい場合はバンドル業者の使用を避けることができません。

消費者はちょうど（私のバンドル、CSSファイル、jqueryの、ブートストラップのような）いくつかの参照を追加することにより、容易&とのバンドル\パッケージを消費することができるはずです。

npm（事実上JSの標準）経由で配布する場合、リソースは正しいパス（例：node_modules/package/styles.css）で定期的にインポートされます。 npmでは、peerDependencies（jquery、ブートストラップがあります）を宣言することもできます。

Answer 2

1.このアプリケーションをパッケージ化するにはどうすればよいですか？

• あなたが低い異なるファイルの数を維持したい場合はあなたがすべてのあなたのCSS、HTMLおよび多分イメージをマージすることができ、イサキやがぶ飲み
• のようなビルドツールを使用して、すべてのHTMLを縮小化すべきである（BASE64エンコードされた）をmodule.jsに追加します。理想的には、1つのファイルのみを配信することで終わる可能性があります。

2.消費者は、単にいくつかの参照を追加することにより、容易&とのバンドル\パッケージを消費することができるはずです。彼らはただのようなスクリプトを含める必要があり、その場合には

：

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

---

あなたはECMAScriptの2015を使用することができるならば、あなたにあなたのプラグアンドプレイのアプリをパッケージ化するために検討するかもしれませんES6モジュール

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

、アプリを消費しているサイトで、上の、あなたは、単にimportキーワードを使用して依存関係を追加：あなたのmodule.js単にとして定義

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

ES6 Modulesについては、こちらをご覧ください。