highcharts 如何使用Rollup将多个ES6模块捆绑到单个ES6兼容捆绑包中

flseospp  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(183)

我正在使用HighChartsv10.x创建图表。HighChartsNPM安装包括所有必要的ES6模块。

以下方法可以正常工作。

在MyChartingModule.js的顶部,我导入了HighCharts模块,如下所示:

import Chart from '../../node_modules/highcharts/es-modules/Core/Chart/Chart';   // 'Chart.js';
import Color from '../../node_modules/highcharts/es-modules/Core/Color/Color';
import LineSeries from '../../node_modules/highcharts/es-modules/Series/Line/LineSeries';
import ColumnSeries from '../../node_modules/highcharts/es-modules/Series/Column/ColumnSeries';
import PieSeries from '../../node_modules/highcharts/es-modules/Series/Pie/PieSeries';

这是脚本标记:

<script type="module" src="../src/js/MyChartingModule.js" defer></script>

现在,我想使用Rollup v2.70.x将五个脚本捆绑到一个包中,这样就可以使用rollup-plugin-terser将其缩小。(我还希望能够动态加载生成的包。)
"这是我尝试过的方法"
rollup/rollup.config.highcharts.js的内容:

import {nodeResolve} from '@rollup/plugin-node-resolve';
// import {terser} from 'rollup-plugin-terser';

export default {
    input: './src/js/chart.bundle.js',
    output: {
        file: './dist/js/chart.esm.js',
        format: 'esm'
    },
    // plugins: [nodeResolve(), terser()]
    plugins: [nodeResolve()]

};

chart.bundle.js的内容:

import Chart from '../../node_modules/highcharts/es-modules/Core/Chart/Chart';   // 'Chart.js';
import Color from '../../node_modules/highcharts/es-modules/Core/Color/Color';
import LineSeries from '../../node_modules/highcharts/es-modules/Series/Line/LineSeries';
import ColumnSeries from '../../node_modules/highcharts/es-modules/Series/Column/ColumnSeries';
import PieSeries from '../../node_modules/highcharts/es-modules/Series/Pie/PieSeries';

NPM脚本

"build:charts": "rollup --config rollup/rollup.config.highcharts.js",

执行指令码的结果:

> rollup --config rollup/rollup.config.highcharts.js

loaded rollup/rollup.config.highcharts.js with warnings
(!) Unused external imports
terser imported from external module "rollup-plugin-terser" but never used in "rollup/rollup.config.highcharts.js"

./src/js/chart.bundle.js → ./dist/js/chart.esm.js...
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/highcharts/es-modules/Series/Pie/PieSeries.js
 9:  * */
10: 'use strict';
11: var __extends = (this && this.__extends) || (function () {
                     ^
12:     var extendStatics = function (d, b) {
13:         extendStatics = Object.setPrototypeOf ||
...and 1 other occurrence
node_modules/highcharts/es-modules/Series/Line/LineSeries.js
 9:  * */
10: 'use strict';
11: var __extends = (this && this.__extends) || (function () {
                     ^
12:     var extendStatics = function (d, b) {
13:         extendStatics = Object.setPrototypeOf ||
...and 1 other occurrence
node_modules/highcharts/es-modules/Series/Column/ColumnSeries.js
 9:  * */
10: 'use strict';
11: var __extends = (this && this.__extends) || (function () {
                     ^
12:     var extendStatics = function (d, b) {
13:         extendStatics = Object.setPrototypeOf ||
...and 1 other occurrence

...and 3 other files
created ./dist/js/chart.esm.js in 1s

MyChartingModule.js中的导入替换为单个导入:

import {Chart, Color, LineSeries, ColumnSeries, PieSeries} from '../../dist/js/chart.esm';

重新加载页面后,Chrome控制台显示此错误:

Uncaught SyntaxError: The requested module '../../dist/js/chart.esm' does not provide an export named 'Chart'

**为什么生成的包丢弃了Chart导出?**我假设是其他导出。
我需要进行哪些更改才能解决问题?

4dc9hkyq

4dc9hkyq1#

要成功捆绑Rollup,您需要将导出添加到输入脚本chart.bundle.js中:

import Highcharts from '../../node_modules/highcharts/es-modules/Core/Globals.js';
import SVGRenderer from '../../node_modules/highcharts/es-modules/Core/Renderer/SVG/SVGRenderer.js';
import Chart from '../../node_modules/highcharts/es-modules/Core/Chart/Chart';   // 'Chart.js';
import Color from '../../node_modules/highcharts/es-modules/Core/Color/Color';
import LineSeries from '../../node_modules/highcharts/es-modules/Series/Line/LineSeries';
import ColumnSeries from '../../node_modules/highcharts/es-modules/Series/Column/ColumnSeries';
import PieSeries from '../../node_modules/highcharts/es-modules/Series/Pie/PieSeries';

const exports = Highcharts;

exports.Renderer = SVGRenderer;
exports.SVGRenderer = SVGRenderer;
exports.Chart = Chart;
exports.chart = Chart.chart;
exports.Color = Color;
exports.LineSeries = LineSeries;
exports.ColumnSeries = ColumnSeries;
exports.PieSeries = PieSeries;
export default exports;

虽然这是使用Gulp时的示例,但这里有一个有用的参考,Creating custom Highcharts files

相关问题