Highcharts: 模块化 Highchart？ 摇树能力。

嗨@envil ，
一开始我建议你只加载包含所有 Highcharts 功能的highstock.js 。 您还可以在此处使用我们的工具构建您的自定义文件：

• https://www.highcharts.com/download

Highcharts 库已经模块化： https ://www.highcharts.com/docs/getting-started/how-to-create-custom-highcharts-files

谢谢你的回复。
我正在查看自定义构建功能。 它给了我一个highchart-custom.src.js ，它根本不方便使用，因为它不是 node_modules，所以我不能以常规方式将它导入到我的 Angular 应用程序中。 打字稿的所有类型定义都消失了。

另外我的意思是 ES 模块，完全独立，可以导入到其他 ES 模块。 看看lodash和date-fns是如何击败underscore和momentjs的，其中最重要的因素之一就是像这样的模块化能力。

@jon-a-nygaard 仅供参考

我也遇到了这个。
我试图用import * as Highstock from 'highcharts/highstock';到处走，但它没有任何效果。

嗨，不久前我们开始将我们的零件文件发布为 ES 模块，这意味着你可以这样做import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js' 。 这可能有助于解决这个问题。

我们目前也在努力使这些部件文件更加独立，这应该会提高 tree shaking 的能力。 目前很难给出一个好的 ETA 何时发布，但我会在我知道更多信息后立即通知您。

你好，

我只使用'stockChart'类型并遇到了同样的问题，但找到了这里描述的解决方案：
https://github.com/highcharts/highcharts-angular#core

import * as Highcharts from 'highcharts';
import Stock from 'highcharts/modules/stock';
Stock(Highcharts);

代替 ：
import * as Highcharts from 'highcharts/highstock';

现在捆绑在一起，它看起来像这样：

我正在使用使用 import * 语法的 highcharts-react。 我还没有放弃，但到目前为止，我一直无法让摇树为它工作。

https://github.com/highcharts/highcharts-react/blob/08cd61ca178276d716ae65fba76e1d07924b2838/src/HighchartsReact.d.ts#L6

我当前的解决方法：将 Highcharts 模块别名为 Highstock 模块。

您可以同时使用图表类型（Highcharts/Highstock）并降低捆绑包大小🥇。

这可以通过 Webpack 完成（查看 Webpack 文档中的“resolve.alias”以获取更多信息）：

    alias: {
      highcharts$: 'highcharts/highstock.js',
    }

您可以使用 Babel 对 (babel-plugin-module-resolver) 进行别名处理。

如果我们可以模块化整个库，那就太好了。

请注意，Highstock 可以作为模块加载到 Highcharts，使用modules/stock.js模块。 就像上面提到的：

import * as Highcharts from 'highcharts';
import Stock from 'highcharts/modules/stock';
Stock(Highcharts);

@pawelfus在我的测试中以某种方式失败： TypeError: Highcharts.stockChart is not a function

不过没有类型问题，应用程序本身也可以工作。 我在开玩笑。 任何的想法？

更新
发现在jest.config.js中以不同方式解析模块有效：

  moduleNameMapper: {
    '^highcharts$': '<rootDir>/node_modules/highcharts/highstock'
  },

这事有进一步更新吗 ？ 考虑放弃 Highcharts，因为它确实是一个巨大的库，可以导入我的项目:(

嗨@Yohandah！ 正如您在https://github.com/highcharts/highcharts/issues/12738 中看到的，我们已经完成了大约一半。

您可以使用大多数 ES 模块来摇树。 虽然目前还没有官方支持（仅限母版），因为我们现在正在移动和拆分文件。 因此，在下一个版本中，示例中的路径将有所不同。

import Chart from 'https://code.highcharts.com/es-modules/parts/Chart.js'
import SVGRenderer from 'https://code.highcharts.com/es-modules/parts/SVGRenderer.js'
new Chart('container', { /* ...options... */ });

https://jsfiddle.net/xtof0m14/