Laravel Mix 和 Turbolinks
Posted
技术标签:
【中文标题】Laravel Mix 和 Turbolinks【英文标题】：Laravel Mix and Turbolinks 【发布时间】：2020-11-16 13:22:15 【问题描述】：我在设置 turbolinks 时遇到了一些问题。这是设置：Laravel Mix - 默认设置：bootstrap、jquery、..）。就在 bootstrap.js 文件之后，我包含了 turbolinks。一切正常，直到页面重新加载 - 我总是出错。我做错了什么？
错误：
app.js:1282 Uncaught TypeError: $ is not a function
at htmlDocument.<anonymous> (app.js:1282)
at Object.push../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (vendor.js:105933)
at r.notifyApplicationAfterPageLoad (vendor.js:105934)
at r.visitCompleted (vendor.js:105934)
at r.complete (vendor.js:105933)
at r.<anonymous> (vendor.js:105933)
at vendor.js:105933
有错误的行：
document.addEventListener('turbolinks:load',function()
new SimpleBar(document.getElementsByClassName("js-simplebar")[0]);
$(".sidebar-toggle").on("click", function()
//...
);
);
编辑 这里是 js 包含（编译 - Laravel Mix）
<head>
<script defer src="/js/manifest.js" data-turbolinks-track="true"></script>
<scrip`enter code here`t defer src="/js/vendor.js" data-turbolinks-track="true"></script>
<script defer src="/js/app.js" data-turbolinks-track="true"></script>
</head>
这是我的 app.js：
require('./bootstrap');
let Turbolinks = require('turbolinks');
Turbolinks.start();
require("./dashboard");
require('./custom/INotifier').run();
require("./theme/bootstrap");
require("./theme/theme");
还有 bootstrap.js（包括 jQuery、bootstrap js、axios、...）
try
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
catch (e)
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
【问题讨论】：
在标题上添加 jquery 导入，这应该足够了，并且在 turbolink 包含之前（或者如果你有它与 laravel 混合，在调用编译的混合脚本之前应该是 jquery）。否则，请在 sn-p 上告诉我们您的脚本在所有导入中的外观 您的catch 中的bootstrap.js 是否有任何错误？
不，我也查过了。
您是否尝试过使用 jQuery() 而不是 $() ，如果您包含其他 JS 库，有时它可以解决它。
也试过了。没有运气。
【参考方案1】：
在您显示的错误中写道Uncaught TypeError: $ is not a function 这个错误主要是在调用它的脚本之前未定义 jquery 时出现的。
通过下载jquery或通过cdn在html的head，turbolinks脚本之前添加jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
【讨论】：
我使用 jquery 作为依赖（npm）。【参考方案2】：将<script defer src="/js/app.js" data-turbolinks-track="true"></script> 移到vendor.js 上方，并从脚本标签中删除defer。
在代码之前加载 jquery
<head>
<script src="/js/manifest.js" data-turbolinks-track="true"></script>
<script src="/js/app.js" data-turbolinks-track="true"></script>
<scrip src="/js/vendor.js" data-turbolinks-track="true"></script>
</head>
【讨论】：
这只是加载顺序错误，请确保您不推迟任何文件并从您的 app.js 文件开始，并确保您使用npm run dev 编译您的 app.js 文件【参考方案3】：
试着先放 JQuery，然后再放 popper js。
try
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
require('bootstrap');
catch (e)
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
这样说的原因 - https://getbootstrap.com/docs/4.0/getting-started/introduction/#js
【讨论】：
以上是关于Laravel Mix 和 Turbolinks的主要内容，如果未能解决你的问题，请参考以下文章
laravel-mix 生成空（0 字节）.css 文件，没有动态导入和 .extract
在 Laravel Mix 中使用 extract() 时 Vue 未加载
javascript 使用Purgecss与Tailwind和Laravel Mix