Question

我是Laravel的新手，并遵循Laracast Laravel 5.4的教程我读到了Laravel mix以及如何使用Webpack Laravel Mix工具编译我们的资产。所以我尝试添加一个JavaScript包

1-使用 npm 安装 AlertifyJS 2-在require('alertifyjs')中添加了resources\assets\js\bootstrap.js 3-执行npm run dev。资产已汇总到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

问题：当我点击按钮显示提醒时，
alertify未定义错误记录到控制台。编译资产时我是否遗漏了什么？

Answer 1

您需要在实际使用它的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');
    });
  });
});

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

1 个答案: