时间戳

首页 > 解决方案 > 如何将前端库连接到laravel？

laravel - 如何将前端库连接到laravel？

问题描述

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

我需要 fullpage.js 库

  1. 通过 npm 下载
  2. 在 resources/js/bootstrap.js 文件中我添加了 require ('fullpage.js');

  3. 在我添加的 resources/js/app.js 文件中

    $ (document) .ready (function () { $ ('.js-fullpage').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');

标签： laravelwebpackfrontend

解决方案

你能试着把它包括进去吗

require('fullpage')

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

推荐阅读