使用 RequireJS 加载 ApexCharts 时遇到问题答案

【问题标题】：Having trouble loading ApexCharts using RequireJS使用 RequireJS 加载 ApexCharts 时遇到问题
【发布时间】：2021-02-05 19:16:47
【问题描述】：

我正在使用 Tabler (tabler.io) 尝试将一些模板迁移到我自己的 CMS 安装中。我遇到的问题是我正在尝试使用 RequireJS (requirejs.org) 加载所有脚本，而 ApexCharts (apexcharts.com) 不是正确加载。我的 RequireJS 配置的相关部分如下：

requirejs.config({
    shim:{
        'apexcharts':{'exports':'ApexCharts'}
    },
    paths:{
        'apexcharts':'https://cdn.jsdelivr.net/npm/apexcharts@3.23.1/dist/apexcharts.amd'
    }
});

据我了解，通过识别 exports 参数，RequireJS 将模块绑定到 window 对象，但在开发工具中 window.ApexCharts 未定义，即使脚本显示为正在加载。我已经尝试了 apexcharts.min.js 和 apexcharts.amd.js 脚本，但都没有运气。

我稍后在项目中有代码依赖于加载的 ApexCharts，但它没有通过 ApexCharts 的存在性检查。下面的示例没有完全运行，因为 $(window).ApexCharts 未定义。

requirejs(['jquery','apexcharts'],function($,ApexCharts){
    $(document).ready(function(){
        $(window).ApexCharts && (new ApexCharts($('#chart-revenue-bg'), {...})).render();
    });
});

Tabler.io 的原始模板使用 apexcharts.min.js 脚本，但由于我对 RequireJS 问题的研究，我遇到了 Github 上报告的以下问题并尝试了 apexcharts.amd.js 脚本以及结果： Loading using Require.js (AMD) broken #357

有人知道我在这里做错了什么吗？（我在控制台中没有看到任何错误，所以我很难过）

CODEPEN 示例说明问题： https://codepen.io/cjholowatyj/pen/eYBZmrb

【问题讨论】：

当您使用 AMD 版本的 ApexCharts 时，您不需要 shim 它，没有它也可以使用

标签： javascript requirejs apexcharts

【解决方案1】：

paths:{
        'apexcharts':'https://cdn.jsdelivr.net/npm/apexcharts@3.23.1/dist/apexcharts.min',
    'capexcharts':'https://cdn.jsdelivr.net/npm/apexcharts@3.23.1/dist/apexcharts.common',
    }

然后：

define(["capexcharts", "apexcharts"], function (c, ApexCharts) {
       });

查看此链接：https://codepen.io/waleed3amer/pen/GRMNYaQ

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。