如何在 Laravel 5 上使用 Elixir 和 Browserify Shim 设置 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依赖于$，App依赖于两者$ 和 Utils.

当我从终端点击 gulp 时，bundle.js 被正确创建。所有脚本都包含在 Browserify 代码中（正如预期的那样）。每个脚本都包含所有依赖项，就像我在 package.json 中配置的那样，所以这部分看起来也不错。

问题是我包含的所有依赖项都是空对象。例如app.js中的Utils是空的，我尝试调用它的方法"doSomething"时出错。控制台日志打印出一个空对象“{}”而不是真实对象。唯一正确包含的脚本是 jQuery，它不是空对象。

这里可能出了什么问题？我是否需要在我的 JS 文件或配置中进行一些更改才能使其正常工作？看起来我已经很接近解决方案了，但它仍然不起作用，我根本无法使用它。

Answer 1

看看 this repo，我认为它显示了您的应用程序的固定版本。问题是您的 app.js 和 utils.js 模块没有向它们各自的 require 调用导出任何内容。一种选择是添加一行：

module.exports = App;

到 app.js 文件的底部，相当于 utils.js 文件的底部。你会看到如果你测试 badapp 没有这一行的回购并产生你所描述的确切行为。

有关问题的解释，请参阅 this answer。

Answer 2

从browserify-shim直接使用'exports'是最简单的解决方案属性:

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

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

How to set up Browserify with Elixir and Browserify Shim on Laravel 5?

browserify

gulp

browserify-shim

laravel-5

laravel-elixir