文件中的 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
});
</script>

但是，如果我在 libraries.js 中包含来自 CDN 的确切 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>

我检查了一下，mix 正在正常编译，JS 包含在 libraries.js。

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

我运行更经常关注这个问题。我想使用 mix() 而不是 asset()。以上是关于 1 个库，但我更愿意将我使用的大部分库都包含在一个文件中 libraries.js，但由于上述问题，今天我要通过 CDN 加载其中的大部分库。

Answer 1

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

Answer 2

这可能对您有所帮助。

我已将给定的 js 文件存储为 .min.js 格式。
而不是使用 mix ，我已经使用 asset 来获取 js 文件。

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

请检查这个。而且我没有发现任何问题。

这是我试过的完整代码：

<script src = "{{asset('js/anime.min.js')}}" type ="text/javascript">
</script>
  <script>
  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>

Answer 3

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

Answer 4

尝试用 :

包装你的内联 js

window.addEventListener('load', function(){ // here });

文件中的 Laravel javascript 无效，但如果通过 CDN 包含则有效

Laravel javascript in file doesn't work, but does work if included through CDN

javascript

laravel

laravel-mix