我正在使用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
导出?**我假设是其他导出。
我需要进行哪些更改才能解决问题?
1条答案
按热度按时间4dc9hkyq1#
要成功捆绑Rollup,您需要将导出添加到输入脚本
chart.bundle.js
中:虽然这是使用Gulp时的示例,但这里有一个有用的参考,Creating custom Highcharts files