使用npm安装JS包并使用webpack编译laravel mix

我是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

问题：当我点击按钮显示警告,
警告未定义错误记录到控制台。我在编译资产时错过了些什么？

来源

2017-03-03 awebartisan

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

是的。 'app.blade.php'，它的布局文件 – awebartisan

不知何故，'alertify's'所有代码都被编译并放在我的'public \ js \ app.js'下，这就是为什么'undefined'错误被抛出的原因 – awebartisan

你需要在你的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'); 
    }); 
    }); 
});

来源

2017-03-03 23:57:41

感谢您的回答。它也帮助了我，但我希望你能多解释一下。我正在尝试将Backbone加入到我现有的Laravel Spark应用程序中，该应用程序正在迅速成为SPA。 Spark包含来自NPM的多个库，使用如下代码： '窗口。_ = require（'underscore'）;' 当我尝试这样做时： 'window.Backbone = require（'backbone'）;' 它不起作用。骨干是未定义的。为什么会表现出这种行为？只是好奇。 – TomWilsonFL

此外，如果你没有注册一些模块的根目录，你是如何覆盖Backbone.sync等函数的呢？ – TomWilsonFL

@TomWilsonFL 1）'window.Backbone = require（'backbone'）'应该使它在浏览器中全局可用，只需要在实际使用它的文件之前包含它。 2）覆盖函数库通常不是一个好主意，这被称为[猴子修补]（https://en.wikipedia.org/wiki/Monkey_patch）。 –

使用npm安装JS包并使用webpack编译laravel mix

回答

相关问题