Question

我正在尝试使用Elixir和Browserify Shim在Laravel 5.2上设置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为空，当我尝试调用其方法＆＃34; doSomething＆＃34;时出现错误。控制台日志打印出一个空对象＆＃34; {} ＆＃34;而不是真实的对象。唯一正确包含的脚本是jQuery，它不是一个空对象。

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

Answer 1

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

"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。

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

2 个答案: