文件中的 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>

我检查并混合正在编译，JS包含在libraries.js中。

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

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

Answer 1

尝试用 :

包装你的内联 js

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

Answer 2

我假设你有一个文件 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 3

这可能会对你有所帮助。

1. 我已将 give js 文件存储为.min.js 格式。
2. 而不是使用 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 4

尝试npm run watch，然后重试。