我正在使用 Laravel 10。在我的 app.js 中，我导入了 splide 模块
import '@splidejs/splide/dist/js/splide'
import '@splidejs/splide/dist/css/themes/splide-default.min.css'
但是，当我想在我的刀片上使用它时，
<script type="module">
new Splide( '.splide' ).mount();
</script>
或
<script>
new Splide( '.splide' ).mount();
</script>
在控制台中，显示
(index):1197 Uncaught ReferenceError: Splide is not defined但是当我在刀片中使用 CDN 链接时，
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
它有效。
看起来当我在app.js中导入js时，Splide并没有创建为全局变量。但是我使用CDN链接时就没有这个问题。我想知道，有人可以帮我解释这个问题。
可以解决吗？
我对jquery也有同样的情况。当我在 app.js 中使用 import jquery 时，总是出现 jQuery is not Defined 的错误。
new Splide() 不起作用，因为它找不到源。假设您已经通过 npm 安装了 splide，这应该很容易。
这应该位于 resources/css/app.css 中，而不是位于 app.js 中。
@import '@splidejs/splide/dist/css/themes/splide-default.min.css'
然后在resources/js/app.js中导入js文件即可
import Splide from '@splidejs/splide/dist/js/splide';
new Splide('.splide').mount();
CDN 可以发挥作用，因为源是直接链接的。在 npm 方法中，插件将保存到您的项目文件夹中。查看 node_modules 文件夹，您将看到您安装的软件包。框架通常有自己的方式在目录中添加链接和导入文件。因此，一定要了解它是如何工作的，就像本例中的 Laravel 一样。
参考：