代码之家  ›  专栏  ›  技术社区  ›  gradosevic

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

  •  2
  • gradosevic  · 技术社区  · 9 年前

    我正在尝试在Laravel 5.2上用Elixir和Browserify Shim设置Browserifiy,以便在JavaScript文件中使用Gulp,但到目前为止我运气不太好。这应该很简单,但事实并非如此。

    这是我的 打包.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');
    });
    

    输入脚本 主.js 看起来像这样:

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

    应用程序.js

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

    简而言之: 实用程序 取决于 $ 应用程序 取决于两者 $ 实用程序 .

    当我从终点站大口大口地喝下去时,我把它捆起来。js已正确创建。所有脚本都封装在Browserify代码中(如预期)。每个脚本都包含所有依赖项,就像我在包中配置的那样。json,所以这部分看起来也不错。

    问题是我包含的所有依赖项都是空对象。例如,应用程序中的Utils。js是空的,当我试图调用它的方法“doSomething”时,我得到了一个错误。控制台日志打印出一个空对象“ {} 唯一正确包含的脚本是jQuery,它不是一个空对象。

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

    2 回复  |  直到 9 年前
        1
  •  2
  •   Muhamed Didovic    9 年前

    直接从browserify填充属性使用“导出”是最简单的解决方案:

    "browserify-shim": {
        "app": {
          "exports": "App",
          "depends": [
            "jquery:$",
            "utils:Utils"
          ]
        },
        "utils": {
          "exports": "Utils",
          "depends": [
            "jquery:$"
          ]
        },
      }
    
        2
  •  1
  •   Community CDub    8 年前

    看看 this repo 我相信它显示了你的应用程序的固定版本。问题是 app.js utils.js 模块不会将任何内容导出到各自的 require 电话。一个选项是添加一行,如:

    module.exports = App;
    

    到你的底部 应用程序.js 文件的底部 实用程序.js 文件你会看到你是否测试了回购 badapp 没有这一行,并且产生了你所描述的确切行为。

    看见 this answer 以了解问题的解释。