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가 아니기 때문에 전혀 사용하기 불편하다. 그리고 typescript에 대한 모든 유형 정의가 사라졌습니다.

또한 내가 의미하는 바는 완전히 독립적이며 다른 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' 할 수 있습니다. 이것은 문제에 도움이 될 수 있습니다.

또한 우리는 현재 이러한 부품 파일을 보다 독립적으로 만드는 작업을 하고 있어 트리 쉐이킹 기능이 향상될 것입니다. 이것이 언제 게시될 것인지에 대한 좋은 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

현재 해결 방법: Alias ​​Highcharts 모듈을 Highstock 모듈로.

차트 유형(Highcharts/Highstock)과 더 낮은 번들 크기 🥇를 모두 사용할 수 있습니다.

이것은 Webpack을 사용하여 수행할 수 있습니다(자세한 내용은 Webpack 문서에서 "resolve.alias" 확인).

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

Babel을 사용하여 (babel-plugin-module-resolver) 앨리어싱을 수행할 수 있습니다.

전체 lib를 모듈화할 수 있다면 좋을 것입니다.

Highstock은 modules/stock.js 모듈을 사용하여 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/