1

browserifyを使用して、Angular jsを単一のスクリプトにパッケージ化しようとしています。requireメインファイル内から使用するとうまく機能しますapp.jsが、必要なモジュールの1つにapp.js独自のが含まれているrequire場合、依存関係はバンドルに含まれていません。

要約すると、app.js（レポの行へのリンク）で：

require("splash-header");
// more code here

スプラッシュヘッダー.js :

require("social-button-directive");
// more code here

socialButtons.jsには依存関係がありません。

browserify --list app.js必要に応じてリストsplashHeader.jsされず、作成されたバンドルbrowserify app.js -o bundle.jsには socialButton の JavaScript が含まれていません。もちろん、とにかくサイトを読み込もうとするとUncaught Error: Cannot find module 'social-button-directive'、splashHeader に到達しrequire('social-button-directive')ます。

また、私のモジュールは common-js と互換性がないため、 の「browser」オプションを使用してモジュール名をファイルの場所にマッピングしpackage.json、browerify-shim を使用していることに注意することも重要です。

package.jsonの関連セクション:

"dependencies": {
    "browserify": "~9.0.3",
    "browserify-shim": "~3.8.3"
},
"browserify": {
    "transform": [
        "browserify-shim"
    ]
},
"browserify-shim": {
    "splash-header": {
        "depends": "angular",
        "exports": "angular.module('splash-header').name"
    },
    "social-button-directive": {
        "depends": "angular",
        "exports": "angular.module('social-button-directive').name"
    }
},
"browser":{
    "splash-header": "./ng-modules/splashHeader/splashHeader.js",
    "social-button-directive": "./ng-modules/socialButtons/socialButtons.js"
}

私はこれを午前中ずっと続けていて、完全に困惑しています。問題の最小限の例として役立つように、問題のあるプロジェクトを切り詰めました。物事をテストするには、clone して npm install するだけです。詳細を調べている場合は、動作中/動作していないバージョンの diff があります。

require('./ng-modules/socialButtons/socialButtons.jsサブモジュールを相対パス ( )`) でロードしようとしましたが、うまくいきませんでした。おそらく私は物事を間違ってシムしましたか？これに関する私のアプローチは、この記事から来ています。

編集：それは間違いなく私のbrowserify-shim構成です。モジュールを commonjs に変換し、package.json から browserf-shim オプションを削除すると、すべてが機能します。私はそれを突き止めるためにこれをすべて書く必要があったと思います。=/

4

0 に答える 0