如何使用Elixir和Browserify在Laravel 5上設置Browserify？

Question

我試圖在Laravel 5.2上使用Elixir和Browserify Shim設置Browserify，將Gulp與我的JavaScript文件一起使用，但迄今爲止我沒有多少運氣。這應該是相當直接的，但事實並非如此。

這裏是我的的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的取決於$，並應用取決於兩個$和utils的。

當我從終端打入gulp時，bundle.js被正確創建。所有腳本都包含在Browserify代碼中（如預期的那樣）。每個腳本都包含依賴項，就像我在package.json中配置的一樣，所以這部分看起來也不錯。

問題是我包含的所有依賴項都是空對象。例如，app.js中的Utils爲空，當我嘗試調用其方法「doSomething」時出現錯誤。控制檯日誌打印出一個空對象「{}」而不是真實的對象。唯一正確包含的腳本是jQuery，它不是一個空對象。

這裏有什麼問題？我是否需要在我的JS文件或配置中進行一些更改以使其工作？看起來我非常接近解決方案，但它仍然不起作用，我根本無法使用它。

Answer 1

它是直接使用從browserify-墊片財產「出口」的最簡單的方法：

"browserify-shim": { 
    "app": { 
     "exports": "App", 
     "depends": [ 
     "jquery:$", 
     "utils:Utils" 
     ] 
    }, 
    "utils": { 
     "exports": "Utils", 
     "depends": [ 
     "jquery:$" 
     ] 
    }, 
    } 

Answer 2

看看this repo，我相信它會顯示您的應用程序的固定版本。問題是您的app.js和utils.js模塊不會將任何內容導出到它們各自的require調用。一種選擇是像添加一行：

module.exports = App; 

您app.js文件的底部，相當於你utils.js文件的底部。你會看到如果你測試回購badapp沒有這條線，併產生你描述的確切行爲。

請參閱this answer以解釋問題。