2

JavaScriptファイルでGulpを使用するために、Laravel 5.2でElixirとBrowserify Shimを使用してBrowserifyをセットアップしようとしていますが、これまでのところあまりうまくいきませんでした。これは非常に簡単なはずですが、そうではありません。

これが私のpackage.jsonです

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8"
  },
  "dependencies": {
    "bootstrap-sass": "^3.0.0",
    "browserify-shim": "^3.8.12",
    "jquery": "^2.2.0",
    "jquery-ui": "^1.10.5",
    "laravel-elixir": "^4.0.0"
  },
  "browser": {
    "app": "./resources/assets/js/app.js",
    "utils": "./resources/assets/js/utils.js",
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "app": {
      "depends": [
        "jquery:$",
        "utils:Utils"
      ]
    },
    "utils": {
      "depends": [
        "jquery:$"
      ]
    },
  }
}

gulpfile.js

var elixir = require('laravel-elixir');

elixir(function (mix) {
    mix.browserify('main.js', './public/js/bundle.js');
});

エントリ スクリプトmain.jsは次のようになります。

var $ = require('jquery');
var Utils = require('utils');
var App = require('app');

app.js

var App = {
     init: function(){
         console.log(Utils);
         Utils.doSomething();
     }
    //other methods
};

つまり、 Utilsは$に依存し、Appは$とUtilsの両方に依存します。

ターミナルから gulp を打つと、bundle.js が正しく作成されます。すべてのスクリプトは、(予想どおり) Browserify コードでラップされています。package.json で構成したように、各スクリプトにはすべての依存関係が含まれているため、この部分も見栄えがします。

問題は、含まれているすべての依存関係が空のオブジェクトであることです。たとえば、app.js の Utils が空で、そのメソッド「doSomething」を呼び出そうとするとエラーが発生します。コンソール ログは、実際のオブジェクトではなく、空のオブジェクト " {} " を出力します。正しく含まれているスクリプトは jQuery だけで、空のオブジェクトではありません。

ここで何が問題なのですか？これを機能させるには、JS ファイルまたは構成を変更する必要がありますか? 私は解決策にかなり近づいているように見えますが、それでも機能せず、まったく使用できません。

4

2 に答える 2

2

browserify-shim プロパティから「exports」を直接使用するのが最も簡単な解決策です。

"browserify-shim": {
    "app": {
      "exports": "App",
      "depends": [
        "jquery:$",
        "utils:Utils"
      ]
    },
    "utils": {
      "exports": "Utils",
      "depends": [
        "jquery:$"
      ]
    },
  }
于 2016-02-01T13:22:14.187 に答える
1

あなたのアプリの修正版を示していると思われるこのレポを見てください。問題はapp.js、utils.jsモジュールがそれぞれのrequire呼び出しに何もエクスポートしていないことです。1 つのオプションは、次のような行を追加することです。

module.exports = App;

あなたのファイルの一番下に、そしてあなたのapp.jsファイルの一番下に相当しutils.jsます。badappこの行がなく、説明している正確な動作を生成するリポジトリをテストするかどうかがわかります。

問題の説明については、この回答を参照してください。

于 2016-02-01T12:57:12.233 に答える