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

Question

我是 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。资产被编译为 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

问题： 当我点击按钮 Show Alert 时，
警报未定义 错误记录到控制台。我在编译资产时遗漏了什么吗？

Answer 1

您需要在实际使用它的 app.js 中要求 alertify。 Webpack 将每个文件作为一个模块，只是将它们放在一个文件（包）中。但是您期望它在全球范围内可用，这不是一个好主意，并且确实依赖于全局变量的模块（如 jQuery 插件）被称为 legacy modules官方 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

installing JS packages using npm and compiling with webpack laravel mix

npm

laravel

webpack

laravel-mix