这有效:

<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
});
</script>

但是,如果我将CDN中的确切JS包括在libraries.js中,如下所示,我会得到ReferenceError: Can't find variable: anime
<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
});
</script>

我检查并混合了它应该编译的JS,它包含在libraries.js中。

它是完全相同的脚本,包含在完全相同的位置,所以我对为什么它不起作用感到困惑。我唯一能想到的是在脚本运行之后加载了libraries.js。是这样吗如果是这样:我该如何解决?

我经常遇到这个问题。我想使用mix()而不是asset()
上面大约有​​1个库,但是我更希望将我使用的所有大多数库都包含在一个文件libraries.js中,但是由于上述问题,今天我要通过CDN加载其中的大多数库。

最佳答案

我假设您有一个文件resources/js/libraries.js和一堆require();来导入npm包,以及另一个JS文件来导入自定义代码?好吧,我想提出一些建议:

您不必为它们制作单独的JS文件,webpack可以像下面这样自动提取它们:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .extract([
        'bootstrap',
        'popper.js',
        'lodash',
        'axios',
        'jquery',
        'vue',
    ]);

mix.version();

然后将其放在布局的底部:
<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>
@stack('scripts')
vendor.js基本上是您的libraries.js,而app.js是您的自定义代码。

当您mix.version()时:如果您的自定义代码更改了,而您又更改了npm run prod,则只有app.js会更改(这是一个小的JS文件),而vendor.js(这是一个大文件)将保持不变。这是一个巨大的优势,因为老用户只需要加载小的app.js,而vendor.js仍将被缓存,从而使加载速度更快。

但是要回答您的问题,它不是选择变量名称anime,因此将其以这种方式导入到您的JS文件中即可识别:
window.anime = require('animejs');

09-25 16:54
查看更多