Laravel Asset Management，如何使用已安装的NPM库（参考错误）

Question

I'm quite new to managing assets in any other way than a direct download, and copying the required files to a designated folder and simply referencing this. However, I wish to keep my assets "close to the framework" and therefore hope to get some clarity regarding how it is done in Laravel.

I am using Laravel v5.4 and NPM v5.3.0

I want to use the Sweet Alert library and so did

npm install sweetalert

which placed the files in the node_modules directory and package.json as expected

This is where the confusion begins. I then did

npm install --no-bin-links

(the no-bin-links flag recommended for Windows hosts by the docs)

and

npm run dev

thinking this would compile/minify the library to my app.js or vendor.js (which does not exist), or at least do some magic to let me use the library.

The output states:

DONE  Compiled successfully in 8551ms  

which suggests to me that I have simply failed to include the Sweet Alert library in this process.

PHPStorm does suggest the library as an auto-complete option, but the application fails to load the library, stating in the JS Console on load:

jQuery.Deferred exception: swal is not defined ReferenceError: swal is not defined

I have also tried "require"-ing the library in bootstrap.js, stating:

window.swal = require('sweetalert');

or simply

swal = require('sweetalert');

Where 'sweetalert' again is suggested by the IDE autocomplete.

Here is how I attempted to use it:

$( document ).ready(function () {
        alert("Hello!"); //works
        swal({
            title: "Hello!",
            text: "Hellooo",
            type: "error",
            confirmButtonText: "OK THEN"
        });
    });

Which throws the error mentioned above.

I also tried initializing using

window.swal({...
sweetAlert({...

which fail.

What am I missing? And how are you supposed to use NPM packages in a Laravel project/what are the best practices?

Any help is greatly appreciated.

Answer 1

You need to add a reference to your sweetalert vendor file in your webpack.js config file.

mix.scripts('/vendor/..../sweetalert2.min.js', '/public/js/sweetalert.min.js');

That will copy it from your vendor folder to your public folder when you run

npm run dev