时间戳

首页 > 解决方案 > 在 webpack 中使用 lottie 库？

javascript - 在 webpack 中使用 lottie 库？

问题描述

我第一次在我的 webpack 项目中使用 Lottie 遇到了一个问题。

正如我通常所做的那样，我将带有 Lottie src 路径的脚本标签放在 body 标签的末尾，但这导致控制台中出现错误：bodymovin is not defined at...

我认为是因为我使用的是 webpack，所以在我的 index.js 之后加载了 Lottie 脚本？我不确定我应该把我的脚本标签放在哪里。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div class="container">
    <canvas id="canvas" width="200" height="200"></canvas>
    </div>
    <h1>Test</h1>
    <button class="button">Press me to light led</button>

    <p class="potentiometer"></p>
    <div class="bm"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"></script>
</body>
</html>

const init = () => {
    const bm = document.querySelector('.bm');
    const anim = bodymovin.loadAnimation({
      container: bm,
      path: `../assets/eye.json`,
      renderer: 'canvas',
      loop: true,
      autoplay: true
    })

标签： javascripthtmlwebpacklottie

解决方案

推荐阅读