时间戳

首页 > 解决方案 > 文件中的 Laravel javascript 不起作用，但如果通过 CDN 包含则可以

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

问题描述

这有效：

<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 加载其中大部分。

标签： javascriptlaravellaravel-mix

解决方案

我假设你有一个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');

推荐阅读