文件中的Laravel javascript不起作用，但是如果包含在CDN中则可以起作用

Question

此作品：

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

<script type="text/javascript">
var textWrapper = document.querySelector('.ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: false})
    .add({
    targets: '.ml6 .letter',
    translateY: ["1.1em", 0],
    translateZ: 0,
    duration: 750,
    delay: (el, i) => 50 * i
}).add({
    targets: '.ml6',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});
</script>

但是，如果我将CDN中的确切JS包含在libraries.js中，如下所示，则会得到ReferenceError: Can't find variable: anime。它是完全相同的脚本，包含在完全相同的位置，因此我对为什么不起作用感到困惑。我唯一能想到的是libraries.js是在脚本运行后加载的。是这样吗如果是这样：我该如何解决？

<script src="{{ mix('/js/libraries.js') }}"></script>

<script type="text/javascript">
var textWrapper = document.querySelector('.ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: false})
    .add({
    targets: '.ml6 .letter',
    translateY: ["1.1em", 0],
    translateZ: 0,
    duration: 750,
    delay: (el, i) => 50 * i
}).add({
    targets: '.ml6',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});
</script>

更新

即使我将下面的代码添加到inlibraries.jsafter实际库中，也会出现相同的错误...

var textWrapper = document.querySelector('.ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: false})
    .add({
    targets: '.ml6 .letter',
    translateY: ["1.1em", 0],
    translateZ: 0,
    duration: 750,
    delay: (el, i) => 50 * i
}).add({
    targets: '.ml6',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});

Answer 1

尝试npm run watch，然后再试一次。

Answer 2

这可能对您有帮助。

而不是使用mix，我已经使用asset来获取js文件。

<script src = "{{asset('js/anime.min.js')}}" type ="text/javascript">

请检查。而且我对此没有发现任何问题。