2

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

1-Installed AlertifyJS。 2- 添加在 3- 执行中。资产被编译为，在这里我可以通过找到alertify关键字来查看alertifyjs代码。 我在resources\assets\js\app.js中使用了如下所示的alertify代码：
require('alertifyjs')resources\assets\js\bootstrap.js
npm run devpublic\js\app.js


`$(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


问题：当我点击按钮Show Alert时，
alertify is not defined错误被记录到控制台。编译资产时我错过了什么吗？

4

1 回答 1

5

您需要在您app.js实际使用它的地方要求 alertify 。Webpack 将每个文件保存为一个模块，只需将它们放在一个文件中（捆绑包）。但是您希望它可以在全球范围内使用，这不是一个好主意，并且依赖于全局变量（如 jQuery 插件）的模块在官方 webpack 文档中被称为遗留模块。查看Shimming以了解有关此类遗留模块的更多详细信息。

无论如何，这对您而言并非如此，但请记住，您使用 npm 安装的模块应该始终在您实际使用它们的文件中是必需的。模块有自己的范围，它不仅仅是在需要时将文件放在一起。如果这个模块的概念对你来说是新的或者你想更好地理解它，你应该阅读Node.js 模块，因为这在 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-03T23:57:41.327 回答