2017-03-03 91 views
1

我是Laravel的新手Laravel和Laravel的教程Laravel 5.4
我閱讀了Laravel mix以及如何使用Webpack Laravel Mix工具編譯我們的資產。所以我嘗試添加一個JavaScript包

1-安裝的AlertifyJS使用npm
2-增加require('alertifyjs') in resources\assets\js\bootstrap.js
3-執行npm run dev。資產被編譯爲public\js\app.js,在那裏我可以看到alertifyjs代碼通過查找alertify關鍵字。

資源使用alertify代碼像下面\資產\ JS \ app.js
使用npm安裝JS包並使用webpack編譯laravel mix

`$(document).ready(function(){ 
    $('.run').on('click' , function(event){ 
     alertify.alert("This is an alert dialog.", function(){ 
     alertify.message('OK'); 
    }); 
    }); 
});` 


查看文件:

@extends('layouts.app') 
@section('content') 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-8 col-md-offset-2"> 
      <div class="panel panel-default"> 
       <div class="panel-heading text-center"><h2>THIS WILL BE THE HOME PAGE<h2></div> 
       <div class="panel-body text-center"> 
        Home Page Content Goes Here! 
       </div> 
          <button class="run">Show Alert</button> 
      </div> 
     </div> 
    </div> 
</div> 
@endsection 


問題:當我點擊按鈕顯示警告,
警告未定義錯誤記錄到控制檯。我在編譯資產時錯過了些什麼?

+0

被包含在任一刀片組件的HTML你app.js文件? – Drazxier

+0

是的。 'app.blade.php',它的佈局文件 – awebartisan

+0

不知何故,'alertify's'所有代碼都被編譯並放在我的'public \ js \ app.js'下,這就是爲什麼'undefined'錯誤被拋出的原因 – awebartisan

回答

4

你需要在你的app.js需要alertify,你實際使用它。 Webpack將每個文件保存爲一個模塊,只需將它們放在一個文件(包)中即可。但是你期望它在全球範圍內可用,這不是一個好主意,而且依賴於全局的模塊(如jQuery插件)在官方webpack文檔中被稱爲傳統模塊。查看Shimming瞭解有關這些傳統模塊的更多詳細信息。

無論如何,情況並非如此,但請記住,使用npm安裝的模塊應始終在您實際使用它們的文件中需要。模塊有自己的範圍,它不僅僅是當你需要它們時把文件放在一起。如果這個模塊的概念對你來說是新的,或者你想更好地理解它,你應該閱讀Node.js Modules,因爲這在JavaScript中被大量使用。

resources\assets\js\app.js需要被改爲:

const alertify = require('alertifyjs'); 

$(document).ready(function(){ 
    $('.run').on('click' , function(event){ 
    alertify.alert("This is an alert dialog.", function(){ 
     alertify.message('OK'); 
    }); 
    }); 
}); 
+0

感謝您的回答。它也幫助了我,但我希望你能多解釋一下。我正在嘗試將Backbone加入到我現有的Laravel Spark應用程序中,該應用程序正在迅速成爲SPA。 Spark包含來自NPM的多個庫,使用如下代碼: '窗口。_ = require('underscore');' 當我嘗試這樣做時: 'window.Backbone = require('backbone');' 它不起作用。骨幹是未定義的。爲什麼會表現出這種行爲?只是好奇。 – TomWilsonFL

+0

此外,如果你沒有註冊一些模塊的根目錄,你是如何覆蓋Backbone.sync等函數的呢? – TomWilsonFL

+0

@TomWilsonFL 1)'window.Backbone = require('backbone')'應該使它在瀏覽器中全局可用,只需要在實際使用它的文件之前包含它。 2)覆蓋函數庫通常不是一個好主意,這被稱爲[猴子修補](https://en.wikipedia.org/wiki/Monkey_patch)。 –