使用npm安装JS软件包并使用webpack laravel mix进行编译 [英] installing JS packages using npm and compiling with webpack laravel mix

问题描述

我是Laravel的新手，并且关注Laravel 5.4的Laracast教程.
我了解了Laravel混合以及如何使用Webpack Laravel混合工具来编译资产.所以我尝试添加一个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 代码:

I am new to Laravel and following Laracast tutorials for Laravel 5.4
I read about Laravel mix and how we can compile our assets using Webpack Laravel Mix tool. So I tried adding a JavaScript Package

1- Installed AlertifyJS using npm.
2- Added require('alertifyjs') in resources\assets\js\bootstrap.js
3- Executed npm run dev. Assets were compiled to public\js\app.js , where I can see alertifyjs code by finding alertify keyword.

I used alertify code like below in resources\assets\js\app.js:

`$(document).ready(function(){
    $('.run').on('click' , function(event){
        alertify.alert("This is an alert dialog.", function(){
        alertify.message('OK');
    });
  });
});`

查看文件:

View File:

@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 错误已记录到控制台.编译资产时我是否缺少某些东西?

Problem: When I click on button Show Alert ,
alertify is not defined errors is logged to console. Am I missing something while compiling assets?

推荐答案

您需要在实际使用app.js的地方要求Alertify. Webpack将每个文件作为模块保存，只是将它们放到一个文件中(捆绑包).但是您希望它在全球范围内可用，这不是一个好主意，并且依赖于全局变量的模块(例如jQuery插件)在官方的webpack文档中称为 legacy modules .请查看填充，以获取有关此类旧模块的更多详细信息.

You need to require alertify in your app.js, where you're actually using it. Webpack keeps each file as a module, just puts them together in one file (the bundle). But you're expecting it to be available globally, which is not a good idea and modules that do depend on globals (like jQuery plugins) are referred to as legacy modules in the official webpack docs. Have a look at Shimming for more details on such legacy modules.

无论如何，这不是您的情况，但是请记住，在实际使用npm的文件中始终需要使用npm安装的模块.模块有自己的作用域，不仅仅是在需要时将文件放在一起.如果您不熟悉模块的这一概念，或者您想更好地理解它，则应该阅读 Node. js模块，因为它在JavaScript中大量使用.

Anyway, that is not the case for you, but just keep in mind that modules you install with npm should always be required in the file you're actually using them. Modules have their own scope, it's not just putting the files together when you require them. If this concept of modules is new to you or you'd like to understand it better you should read Node.js Modules, because this is heavily used in 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进行编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！