使用Webpack + Typescript加载AmCharts

Question

我有一些严重的问题让任何图表库与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很好地发挥，或者是一个符合以下标准的体面的替代图表库：

1. 体面的Typescript定义支持
2. 可通过JSON配置
3. 与ES6 / Webpack / CommonJS很好地配合使用

提前致谢！

Answer 1

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

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

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

ASNWER：

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

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

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