使用 Webpack + Typescript 加载 AmCharts

Question

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

我的 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

提前致谢！

Answer 1

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

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

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

ASNWER:

我能够通过使用 window 变量引用 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'

使用 Webpack + Typescript 加载 AmCharts

Loading AmCharts with Webpack + Typescript

javascript

charts

amcharts

typescript

webpack

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

动态导入 amChart

amChart 配置