Question

在laravel上进行开发时，如何正确连接第三方插件？

我需要fullpage.js库

通过npm下载了它
在我添加的require / js / bootstrap.js文件中（'fullpage.js'）;
在我添加的resources / js / app.js文件中

$（文档）.ready（函数（）{ $（'。js-fullpage'）。完整页面（{}）; }）;

我启动项目，并在控制台中看到

app.js: 4655 jQuery.Deferred exception: $ (...). fullpage is not a function TypeError: $ (...). fullpage is not a function
    at HTMLDocument. <anonymous> (http: // localhost: 3000 / js / app.js: 770: 21)
    at mightThrow (http: // localhost: 3000 / js / app.js: 4371: 29)
    at process (http: // localhost: 3000 / js / app.js: 4439: 12) undefined

app.js: 770 Uncaught TypeError: $ (...). fullpage is not a function

好像没有看到连接，它是一个库..

通常，我从resources / js / app.js发出的呼叫代码是为什么您比resources / js / bootstrap.js优越的原因，尽管它们的连接顺序不同

我的引导文件

try {
    window.$ = window.jQuery = require('jquery');
} catch (e) {

}

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found:https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

require('fullpage.js');

Answer 1

您可以尝试像这样包含它吗

require('fullpage')

或者您可以尝试传递完整路径

Answer 2

将其添加到您的webpack.mix.js并根据您的环境运行npm run dev或npm run prod：

mix.js([
    'resources/assets/js/app.js',
    'path/to/fullpage.js',
], 'public/js/app.js')

如何将前端库连接到laravel？

2 个答案: