如何将前端库连接到laravel？

Question

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

我需要 fullpage.js 库

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

3. 在我添加的 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')