使用WebPack打包Angular 2应用时出现FusionCharts.register不是函数错误

嘿，这个问题我之前踩过类似的坑，咱们一步步来排查解决：

首先，修正Webpack别名的路径问题 #

你当前的别名配置用了'/lib/fusioncharts/fusioncharts.js'，这个绝对路径指向的是系统根目录，而非你的项目根目录！Webpack虽然没报错，但实际可能没找到正确的库文件，导致导入的对象不完整。

修正方法：用path.resolve拼接项目根路径，确保Webpack精准定位本地库：

const path = require('path');

// 在Webpack配置的resolve.alias中修改：
resolve: {
  alias: {
    'fusioncharts': path.resolve(__dirname, 'lib/fusioncharts/fusioncharts.js'),
    'fusionthemes': path.resolve(__dirname, 'lib/fusioncharts/fusioncharts.theme.fusion.js') // 替换为你的主题文件实际路径
  }
}

其次，处理非ES模块的FusionCharts导出问题 #

本地的FusionCharts库大概率是传统全局变量导出（通过window.FusionCharts暴露），而非标准ES模块。直接用import导入时，Webpack可能无法正确解析导出对象，导致register方法缺失。

这时候需要用exports-loader把全局变量转换成ES模块导出：

1. 先安装依赖：

npm install exports-loader --save-dev

2. 在Webpack的module.rules中添加规则：

module: {
  rules: [
    {
      test: /fusioncharts\.js$/,
      use: 'exports-loader?type=commonjs&exports=window.FusionCharts'
    },
    // 若使用主题文件，同样需要处理：
    {
      test: /fusioncharts\.theme.*\.js$/,
      use: 'exports-loader?type=commonjs&exports=window.FusionCharts'
    }
  ]
}

最后，调整导入与注册的顺序 #

确保在组件中先导入FusionCharts，再导入主题并完成注册：

import FusionCharts from 'fusioncharts';
import FusionTheme from 'fusionthemes';

// 注册主题
FusionCharts.register('theme', FusionTheme);

可选：简化ProvidePlugin配置 #

如果你不需要在所有模块中自动注入FusionCharts，可以把ProvidePlugin里的FusionCharts: 'fusioncharts'和'fusionthemes':'fusionthemes'去掉，手动导入反而更不易出错。

按照这些步骤调整后，应该就能解决FusionCharts.register is not a function的错误了！

内容的提问来源于stack exchange，提问作者Sai Srinivasan