如何不使用RequireJS等模块加载器调用lottie-colorify，解决lc未定义问题

问题原因 #

你直接通过<script>标签引入UMD格式的lottie-colorify脚本时，在没有RequireJS这类模块加载器的环境下，库的导出内容不会自动生成lc变量，而是会挂载到全局window对象上，这个库对应的全局挂载名称为LottieColorify。

解决方法 #

在你的业务代码开头手动把全局挂载的对象赋值给lc变量即可，修改后的完整代码如下：

<html style="width: 100%; height: 100%">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.3/lottie.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> -->
    <script src="../../lib/umd/index.js"></script>
  </head>
  <body style="background-color: #ccc; margin: 0px; height: 100%; font-family: sans-serif; font-size: 10px">
    <div style="width: 100%; height: 100%; background-color: #333" id="bodymovin"></div>

    <script>
      // 手动获取全局挂载的lottie-colorify实例
      const lc = window.LottieColorify;
      $.getJSON('https://assets6.lottiefiles.com/packages/lf20_guwqiaxe.json', function (data) {
        var animData = {
          wrapper: document.getElementById('bodymovin'),
          animType: 'html',
          loop: true,
          prerender: true,
          autoplay: true,
          animationData: lc.flatten('#ffff00', data),
        };
        var anim = bodymovin.loadAnimation(animData);
      });
    </script>
  </body>
</html>

注意事项 #

如果修改后还是提示lc未定义，先检查../../lib/umd/index.js的文件路径是否正确，打开浏览器控制台的网络面板查看该脚本是否加载成功。如果脚本加载成功还是报错，可以在控制台输入console.log(window)，在输出的全局属性列表里找到lottie-colorify对应的导出名称，替换掉LottieColorify即可。

内容的提问来源于stack exchange，提问作者BLKKKBVSIK