npm 経由でバックボーンをインストールしました。これは node_modules フォルダー (Web ルートではなく) に配置されています。index.html ファイルに含めるにはどうすればよいですか?
3 に答える
CommonJS (つまり Node スタイル) モジュールに完全に基づいてフロントエンド コードを作成することができます。
npm を介してフロントエンドの依存関係をインストールする場合、Browserify などのパッケージ バンドル ツールを使用して、すべての依存関係を 1 つのファイルにバンドルできます。このようにして、サーバー側パッケージを使用するのと同じ方法でブラウザー依存パッケージを使用できます: Node の require 関数を使用します。モジュール(node_modulesディレクトリまたは通常のファイルのいずれか)を必要とし、それを操作するだけです。
browserify の基本的な使用方法は非常に簡単です。Web ルートはbrowserify clientcode.js > webroot/clientbundle.js
どこにあるのかを実行するだけですwebroot
。次に、clientbundle.js
html ファイルに含めます。
clientcode.js
クライアントの「メイン」スクリプトであり、Express アプリなどの「app.js」(または同様のもの) に匹敵します。必要なだけ大きくすることができますが、他の CommonJS モジュールで定義された関数を実行するためのブートストラップ コードとしてのみ使用することもできます。
ブラウザ化された依存関係と通常の依存関係を簡単に混在させることができることに注意してください。事前に含めたスクリプト (ブラウザ化されていない jquery など) はすべてグローバルになり、browserify はグローバルへのアクセスを妨げません。
ただし注意してください: クライアント側ライブラリに基づいて npm を介して配布される一部のパッケージは、CommonJS 仕様に (完全に) 準拠していません。何もエクスポートしないものもあれば、(予期せず) グローバルを作成するものもあります。
CommonJS を使用したバックボーン アプリと Browserifyも参照してください。
browserify に代わるいくつかの方法:
- https://github.com/michaelficarra/commonjs-everywhere
- https://github.com/medikoo/modules-webmake
- https://github.com/webpack/webpack
私はそれらを試していません。