使用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'