我是 Laravel 新手,正在关注 Laravel 5.4 的 Laracast 教程
我了解了 Laravel mix 以及如何使用 Webpack Laravel Mix 工具编译我们的资源。所以我尝试添加 JavaScript 包
1-使用npm安装AlertifyJS。
2-在resources\assets\js\bootstrap.js
中添加了require('alertifyjs')
3-执行npm run dev
。 Assets 被编译到 public\js\app.js
,我可以在其中通过查找 alertify 关键字来查看 alertifyjs 代码。
我在resources\assets\js\app.js中使用了alertify代码,如下所示:
`$(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
问题:当我点击按钮显示警报时,
警报未定义错误被记录到控制台。我在编译 Assets 时遗漏了什么吗?
最佳答案
您需要在您实际使用它的 app.js
中要求alertify。 Webpack 将每个文件作为一个模块,只是将它们放在一个文件( bundle )中。但是您期望它在全局范围内可用,这不是一个好主意,并且依赖于全局变量(如 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');
});
});
});
关于laravel - 使用 npm 安装 JS 包并使用 webpack laravel mix 进行编译,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42584961/