Highcharts: Highchart modulieren? Fähigkeit zum Schütteln von Bäumen.

Hallo @Envil ,
Am Anfang rate ich Ihnen, nur highstock.js zu laden, das alle Funktionen von Highcharts enthält. Sie können Ihre benutzerdefinierte Datei auch mit unserem Tool hier erstellen:

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

Highcharts lib ist bereits modularisiert: https://www.highcharts.com/docs/getting-started/how-to-create-custom-highcharts-files

Vielen Dank für Ihre Antworten.
Ich schaue mir die benutzerdefinierte Build-Funktion an. Es gibt mir ein highchart-custom.src.js , das überhaupt nicht bequem zu verwenden ist, da es kein node_modules ist, sodass ich es nicht normal in meine Angular-Anwendung importieren kann. Und alle Typdefinitionen für das Typoskript sind weg.

Was ich auch meine, ist das ES-Modul, völlig unabhängig und kann in andere ES-Module importiert werden. Sehen Sie, wie lodash und date-fns underscore und momentjs besiegt haben, einer der wichtigsten Faktoren ist die Modularisierungsfähigkeit wie diese.

@jon-a-nygaard FYI

Darauf stoße ich auch an.
Ich habe versucht, mit import * as Highstock from 'highcharts/highstock'; herumzugehen, aber es hat überhaupt keine Wirkung.

Hallo, vor einiger Zeit haben wir damit begonnen, unsere Teiledateien als ES-Module zu veröffentlichen, was bedeutet, dass Sie import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js' tun können. Das hilft vielleicht einigen bei dem Thema weiter.

Wir arbeiten derzeit auch daran, diese Teiledateien eigenständiger zu machen, was die Tree-Shaking-Funktionen verbessern sollte. Es ist im Moment etwas schwierig, eine gute ETA für die Veröffentlichung zu geben, aber ich werde Sie auf dem Laufenden halten, sobald ich mehr weiß.

Hallo,

Ich verwende nur den Typ „stockChart“ und bin auf dasselbe Problem gestoßen, habe aber eine hier beschriebene Lösung gefunden:
https://github.com/highcharts/highcharts-angular#core

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

anstatt :
import * as Highcharts from 'highcharts/highstock';

jetzt im Bundle sieht es so aus:

Ich verwende highcharts-react, das die Syntax import * verwendet. Ich gebe noch nicht auf, aber bisher konnte ich Tree Shaking nicht zum Laufen bringen.

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

Meine aktuelle Problemumgehung: Alias ​​Highcharts-Modul in Highstock-Modul.

Sie können beide Diagrammtypen (Highcharts/Highstock) und die geringere Bündelgröße verwenden 🥇 .

Dies kann mit Webpack erfolgen (siehe „resolve.alias“ in der Webpack-Dokumentation für weitere Informationen):

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

Sie können mit Babel ein Aliasing für (babel-plugin-module-resolver) durchführen.

Wäre schön, wenn wir die ganze Lib modularisieren könnten.

Beachten Sie, dass Highstock als Modul in Highcharts geladen werden kann, indem das Modul modules/stock.js verwendet wird. Wie oben erwähnt:

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

@pawelfus Irgendwie scheitert das in meinen Tests mit: TypeError: Highcharts.stockChart is not a function

Keine Typprobleme und die Anwendung selbst funktioniert auch. Ich benutze Scherz. Irgendeine Idee?

AKTUALISIEREN
Herausgefunden, dass das Auflösen des Moduls in jest.config.js anders funktioniert:

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

Gibt es hierzu Neuigkeiten ? Erwäge, Highcharts zu löschen, da es wirklich eine RIESIGE Bibliothek ist, die ich in mein Projekt importieren kann :(

Hallo @Yohandah! Wir sind ungefähr auf halbem Weg, wie Sie in https://github.com/highcharts/highcharts/issues/12738 sehen können.

Sie können die meisten ES-Module zum Tree Shake verwenden. Dies wird derzeit jedoch nicht offiziell unterstützt (nur Master), da wir gerade Dateien verschieben und aufteilen. Mit der nächsten Version werden die Pfade im Beispiel also anders sein.

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/