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

Question

This works:

<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>

But if I include the exact JS from the CDN in libraries.js as shown below, I get 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>

I checked and mix is compiling as it should, the JS is included in libraries.js .

It's the exact same script, included in the exact same location so I'm puzzled as to why this is not working. The only thing I can think of is that libraries.js is loaded after the script is ran. Is that the case? If so: how do I solve this?

I'm running into this issue more often. I would like to use mix() instead of asset() . The above is about 1 library, but I would prefer to include all of most of the libraries I use in the one file libraries.js , but today I'm loading most of them through CDNs because of the issue described above.

Answer 1

I'm assuming you have a file resources/js/libraries.js with a bunch of require(); to import npm packages and another JS file to import custom code? Well I would like to suggest something:

You don't have to make a separate JS file for them, webpack can extract them automatically like:

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();

Then you put this at the bottom of your layout:

<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 is basically your libraries.js and app.js is your custom code.

When you mix.version() : If your custom code changes and you npm run prod , only app.js will change (which is a small JS file) and the vendor.js (which is a big file) will stay exactly the same. This is a huge advantage as old users will only have to load the small app.js and the vendor.js will still be cached, making the loading faster.

---

But to answer your question , it's not picking up the variable name anime , so import it like this in your JS file to be recognized:

window.anime = require('animejs');

Answer 2

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

Answer 3

This might help you .

1. I have stored the give js file as .min.js format .
2. Instead of using mix , I have used asset to get the js file .

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

Please check this. And I didn't find any issue on this .

Here is the complete code Which I have tried :

<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

尝试用以下内容包装您的内联 js：

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