企业官网建设流程全解析

Highcharts V12 版本的改变

Highcharts v12 引入了一种基于 Webpack 的新的通用模块定义（UMD），旨在使 Highcharts 模块的使用更加便捷且加载速度更快。

感谢这一变化，用户很快就能充分利用 ESM（ES 模块）包的全部潜力。

新的 UMD 在某些配置下与之前的 UMD 兼容，同时也为其他配置带来一些变化。本文档将说明 Highcharts v12 包的这些变化。

1. 无模块工厂

新的 UMD 不再附带用于 Highcharts 模块的工厂函数。取而代之的是，所有模块将自动识别共享的命名空间，而不需要通过 Highcharts 命名空间调用每个工厂函数。这意味着加载 Highcharts 模块的代码会更少。

v12 之前:

importHighchartsfrom'highcharts';importHighchartsExportfrom'highcharts/modules/exporting';HighchartsExport(Highcharts);

v12 之后:

importHighchartsfrom'highcharts';import'highcharts/modules/exporting';

Support both variants:

importHighchartsfrom'highcharts';importHighchartsExportfrom'highcharts/modules/exporting';typeofHighchartsExport==='function'&&HighchartsExport(Highcharts);

2. 异步/懒加载需要使用ES模块

由于UMD的特性，Highcharts模块的异步支持仅限于某些特定的设置。现在新的UMD在所有设置中都一致地要求同步加载。若采用异步方式，则需要使用ESM版本，可以通过highcharts/esm/路径找到。

• HTML 示例:

  <scripttype="module">import Highcharts from 'https://code.highcharts.com/esm/highcharts.js'; import 'https://code.highcharts.com/esm/highcharts-more.js'; import 'https://code.highcharts.com/esm/modules/exporting.js'; import 'https://code.highcharts.com/esm/modules/accessibility.js';</scripts>

• Node.js 示例:

  importHighchartsfrom'highcharts/es-modules/masters/highcharts.src.js';import'highcharts/es-modules/masters/highcharts-more.src.js';import'highcharts/es-modules/masters/modules/exporting.src.js';import'highcharts/es-modules/masters/modules/accessibility.src.js';

• Next.js 示例:

  'use client';importHighchartsfrom'highcharts/es-modules/masters/highcharts.src.js';import'highcharts/es-modules/masters/highcharts-more.src.js';import'highcharts/es-modules/masters/modules/exporting.src.js';import'highcharts/es-modules/masters/modules/accessibility.src.js';

3. 无Highcharts._modules a和 HighchartsModuleLoaded 事件

在Highcharts 12 之前的版本中，内置了一个模块系统以实现即时修改。
这个内部模块系统已经被移除。 可以通过 自定义包 和动态导入来实现其他即时修改的方法。

更多改变

了解所有变更的详细信息，请查看我们的 关于
Highcharts v12 的博客文章 。