使用Rollup+TypeScript打包highlight.js时遇导出错误求助

问题描述 #

使用fs-lit-element-starter-ts项目构建包含highlight.js的打包文件，步骤如下：

• 克隆项目并初始化：

  git clone git@github.com:fireflysemantics/fs-lit-element-starter-ts.git b
  cd b
  npm i 
  npm run rollup
  

  可正常完成打包。但安装highlight.js（npm i highlight.js）后，在src/my-dispatcher.component.ts中使用默认导入：

  import hljs from "highlight.js";
  

  并通过h:any = hljs;避免lint错误，执行npm run rollup时出现RollupError：

  node_modules/highlight.js/es/index.js (2:7): "default" is not exported by "node_modules/highlight.js/lib/index.js"

解决思路 #

1. 调整导入方式（优先推荐） #

highlight.js的ES模块未提供默认导出，需改用命名导入或命名空间导入：

• 命名导入（按需加载）：

  import { highlight, registerLanguage } from 'highlight.js';
  import javascript from 'highlight.js/lib/languages/javascript';
  
  registerLanguage('javascript', javascript);
  // 使用示例：highlight('console.log("hello");', { language: 'javascript' })
  

• 命名空间导入（完整加载）：

  import * as hljs from 'highlight.js';
  // 使用示例：hljs.highlight('console.log("hello");', { language: 'javascript' })
  

  修改导入后，将h:any = hljs;调整为对应导入的变量即可，无需依赖默认导入规避lint错误。

2. 配置Rollup适配默认导入（备选） #

若坚持使用默认导入，可通过@rollup/plugin-commonjs插件将CommonJS模块转换为ES模块，并配置默认导出：

• 安装插件：

  npm i @rollup/plugin-commonjs --save-dev
  

• 修改Rollup配置文件（通常为rollup.config.js）：

  import commonjs from '@rollup/plugin-commonjs';
  
  export default {
    // 其他配置项...
    plugins: [
      // 已存在的插件...
      commonjs({
        defaultIsModuleExports: true,
        include: 'node_modules/highlight.js/**'
      })
    ]
  };
  

3. 验证Rollup模块解析逻辑 #

检查Rollup配置是否正确指向highlight.js的ES模块入口，避免误加载CommonJS版本：

• 安装@rollup/plugin-node-resolve插件（未安装则先执行npm i @rollup/plugin-node-resolve --save-dev），并配置优先解析ES模块：

  import resolve from '@rollup/plugin-node-resolve';
  
  export default {
    // 其他配置项...
    plugins: [
      resolve({
        preferBuiltins: false,
        mainFields: ['module', 'main'] // 优先加载package.json中module字段对应的ES模块
      })
      // 已存在的插件...
    ]
  };
  

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