Laravel 5 如何在Laravel 5上使用长生不老药和Browserify垫片设置Browserify?
我正在尝试在Laravel5.2上设置BrowserifywithElixir和BrowserifyShim,以便在JavaScript文件中使用Gulp,但到目前为止我运气不好。这应该很简单,但事实并非如此 这是我的包。jsonLaravel 5 如何在Laravel 5上使用长生不老药和Browserify垫片设置Browserify?,laravel-5,gulp,browserify,laravel-elixir,browserify-shim,Laravel 5,Gulp,Browserify,Laravel Elixir,Browserify Shim,我正在尝试在Laravel5.2上设置BrowserifywithElixir和BrowserifyShim,以便在JavaScript文件中使用Gulp,但到目前为止我运气不好。这应该很简单,但事实并非如此 这是我的包。json { "private": true, "devDependencies": { "gulp": "^3.8.8" }, "dependencies": { "bootstrap-sass": "^3.0.0", "browser
{
"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');
});
var App = {
init: function(){
console.log(Utils);
Utils.doSomething();
}
//other methods
};
条目脚本main.js如下所示:
var $ = require('jquery');
var Utils = require('utils');
var App = require('app');
app.js
var elixir = require('laravel-elixir');
elixir(function (mix) {
mix.browserify('main.js', './public/js/bundle.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文件或配置中进行一些更改才能使其正常工作?看起来我很接近解决方案,但它仍然不起作用,我根本无法使用它。看一看,我相信它显示了你的应用程序的固定版本。问题是您的app.js
和utils.js
模块没有将任何内容导出到各自的require
调用。一个选项是添加一行,如:
module.exports = App;
位于app.js
文件的底部,与utils.js
文件的底部相同。您将看到您是否测试了badapp
没有这一行的回购协议,并生成了您所描述的确切行为
有关此问题的解释,请参阅。直接使用browserify shim属性的“导出”是最简单的解决方案:
"browserify-shim": {
"app": {
"exports": "App",
"depends": [
"jquery:$",
"utils:Utils"
]
},
"utils": {
"exports": "Utils",
"depends": [
"jquery:$"
]
},
}