Rollup打包多个ES6模块为ESM单包时导出丢失的解决方法

两个核心问题导致打包后异常：

1. 导出丢失的直接原因：入口文件chart.bundle.js仅执行了模块导入，没有写任何显式导出逻辑。Rollup以ESM模式打包时，只会把入口文件明确对外暴露的内容作为bundle的对外导出项，没有被导出的内部模块引用不仅不会对外暴露，还可能被Tree-Shaking机制判定为无效代码直接剔除，自然会出现找不到Chart命名导出的报错。
2. 构建时弹出的this has been rewritten to undefined警告，是因为HighCharts的ES模块中包含TypeScript编译生成的__extends继承兼容代码，这类代码默认会读取顶层this，但ESM规范中顶层this本身为undefined，Rollup默认的转换逻辑会触发该警告，不处理可能导致系列类的继承逻辑运行异常。

按以下步骤修改配置和代码即可：

• 修改入口文件src/js/chart.bundle.js，补全显式导出语句，把导入的所有HighCharts模块对外暴露：

import Chart from '../../node_modules/highcharts/es-modules/Core/Chart/Chart';
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';

// 补全命名导出，这是解决导出丢失的核心
export {
  Chart,
  Color,
  LineSeries,
  ColumnSeries,
  PieSeries
};

• 修改Rollup配置文件rollup/rollup.config.highcharts.js，添加顶层this指向配置解决警告，同时启用terser压缩：

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',
        // 指定顶层this指向window，适配HighCharts的兼容代码
        context: 'window'
    },
    plugins: [nodeResolve(), terser()]
};

• 修正业务代码中的模块导入路径，补全.js后缀。原生ESM在浏览器中运行时对路径解析要求严格，省略后缀会导致模块加载失败：

// 补全文件后缀.js
import {Chart, Color, LineSeries, ColumnSeries, PieSeries} from '../../dist/js/chart.esm.js';

修改完成后重新执行npm run build:charts构建，生成的bundle会正常包含所有需要的命名导出，页面重载后即可正常运行，不会再抛出导出不存在的错误。

内容的提问来源于stack exchange，提问作者Karl