使用 Webpack + Typescript 加载 AmCharts答案

【问题标题】：Loading AmCharts with Webpack + Typescript使用 Webpack + Typescript 加载 AmCharts
【发布时间】：2016-01-19 00:13:39
【问题描述】：

我在让任何图表库与 webpack + typescript 一起工作时遇到了一些严重的问题。我现在正在使用 AmCharts，并且已经在定义文件上进行了工作，以使 typescript 编译器能够识别模块语法。

我的 webpack 配置是这样设置的：

"resolve": {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
        "alias": {
            "config": path.join(__dirname, "../app"),
            "amcharts": "amcharts3/amcharts/amcharts.js"
        }
    },

在打字稿中： import AmCharts from "amcharts";

现在，这一切都按预期编译，但是当我执行 console.log(AmCharts)我只剩下一个空对象。

有没有人有任何让 AmCharts + webpack 运行良好的经验，或者符合以下标准的不错的替代图表库：

体面的 Typescript 定义支持
可通过 JSON 配置
与 ES6/Webpack/CommonJS 配合得很好

提前致谢！

【问题讨论】：

标签： javascript charts typescript webpack amcharts

【解决方案1】：

我遇到了同样的问题import AmCharts from 'amcharts3'

打印到控制台时得到一个空对象，出现以下错误：

Uncaught TypeError: _amcharts2.default.makeChart is not a function

回答：

我能够通过使用 window 变量引用 amcharts 来纠正我的问题，例如 window.AmCharts.makeChart('chartdiv', options)

希望您可以使用相同的方法。

【讨论】：

我最终得到了 amcharts 支持团队的回复。诀窍是在 webpack 配置中执行 externals: {"amcharts": "var AmCharts"},，然后将其实际放入 index.html 中的脚本标签中。然后在必要时您可以执行import "amcharts" 并且它会起作用。他们说 amcharts 的下一个版本（v4？）将支持 ES6，但还有很长的路要走。很遗憾，它是目前最好的图表库之一。
导入库荣誉的更简洁的方式
与@amcharts/amcharts4一起工作

【解决方案2】：

我们使用 webpack + 动态导入 + amChart 配置。

将 amChart 依赖项复制到构建文件夹

    new WebpackPluginCopy([
        // Coppy amChart export dependency libs
        {
            from: 'node_modules/amcharts3/amcharts/plugins/export/libs',
            ignore: ['!*.min.js'],
            to: 'js/plugins/export/libs'
        },
        {
            from: 'node_modules/amcharts3/amcharts/plugins/export/libs/pdfmake/vfs_fonts.js',
            to: 'js/plugins/export/libs/pdfmake/vfs_fonts.js'
        },
        {
            from: 'node_modules/amcharts3/amcharts/plugins/export/shapes',
            to: 'js/plugins/export/shapes'
        }]),

module: {
    rules: [
        // Load amChart export style
        {
            test: /export.css/,
            use: ['style-loader', 'postcss-loader']
        }]}

动态导入 amChart

Promise.all([

        //Dynamically import amchart dependencies
        import('amcharts3/amcharts/plugins/export/export.css'),
        import('amcharts3/amcharts/amcharts'),
        import('amcharts3/amcharts/serial'),
        import('amcharts3/amcharts/themes/light'),
        import('amcharts3/amcharts/plugins/export/export.min')


    ])

amChart 配置

path: '/js'

【讨论】：