npm、Gulp、および browserify を使用して、アプリケーションの半自動ビルド パイプラインを作成しています。これは私が達成しようとしていることです:
- スクリプトタグを介して含めることができるページ固有のファイルがあります(つまり、、
page1.js
...page2.js
) - ページ固有のスクリプト間で共有されているカスタム コードを
common.js
. - npm 経由でインストールされたベンダー ライブラリ (つまり、ブートストラップ、jquery) を に抽出し
vendor.js
ます。
アプリケーションで browserify と browserify-shim を組み合わせることができません。私のウェブページには、、、およびが含まれvendor.js
てcommon.js
いpage1.js
ます。ページを読み込もうとすると、スクリプトがしようとするとrequire('bootstrap')
、ここで例外がスローされます。
// Part of bootstrap.js
if (typeof jQuery === 'undefined') {
throw new Error('Bootstrap\'s JavaScript requires jQuery')
}
ブートストラップがjqueryに依存していること、jqueryのエクスポートがjQuery変数にバインドされることを期待していることをbrowserify-shimに伝える必要があると思います。package.json でこれを実行しようとしました。
何が問題なのかを正確に特定するのに苦労しています。jquery:jQuery
ブートストラップのシム ( 、jquery:$
、 )に入るために値のさまざまな順列を試しましたがjquery
、役に立ちませんでした。browser
また、パスにさまざまな値を含めたり省略したりしてみました。また、コマンド ラインを使用してベンダー バンドルをビルドしようとしました: を使用し./node_modules/.bin/browserify -r jquery -r bootstrap > vendor.js
ましたが、同じエラーがブラウザーに表示されます。browserify-shim と factor-bundle について多くの質問が寄せられていますが、この 2 つを組み合わせようとしている人には対応していません。
ここで問題を示すリポジトリを作成しました。インストールと再現の手順は README に記載されています。https://github.com/linkleonard/browserify-shim-factor-bundle