Highcharts: Highchartをモジュール化しますか？ ツリーシェイク機能。

こんにちは@envil 、
最初に、Highchartsのすべての機能を含むhighstock.jsのみをロードすることをお勧めします。 こちらのツールを使用してカスタムファイルを作成することもできます。

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

Highcharts libはすでにモジュール化されています： https ：//www.highcharts.com/docs/getting-started/how-to-create-custom-highcharts-files

ご回答ありがとうございます。
カスタムビルド機能を見ています。 highchart-custom.src.jsが表示されますが、これはnode_modulesではないため、まったく使用するのに便利ではありません。そのため、通常の方法でAngularアプリケーションにインポートすることはできません。 そして、typescriptのすべての型定義はなくなりました。

また、私が言いたいのは、完全に独立していて、他のESモジュールにインポートできるESモジュールです。 lodashとdate-fnsがunderscoreとmomentjsをどのように打ち負かしたかをご覧ください。最も重要な要素の1つは、このようなモジュール化機能です。

@ jon-a-nygaard FYI

私もこれに遭遇しています。
import * as Highstock from 'highcharts/highstock';で回ろうとしましたが、何の効果もありません。

こんにちは。しばらく前に、パーツファイルをESモジュールとして公開し始めました。つまり、 import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js'を実行できます。 これは、問題の一部に役立つ可能性があります。

現在、これらのパーツファイルをよりスタンドアロンにする作業も行っています。これにより、ツリーシェイク機能が向上するはずです。 現時点では、これがいつ公開されるかについて適切な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）にエイリアシングを行うことができます。

lib全体をモジュール化できればいいのにと思います。

modules/stock.jsモジュールを使用して、HighstockをモジュールとしてHighchartsにロードできることに注意してください。 上記のように：

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/