在Rollup中使用highlight.js的常见问题与解决方案

highlight.js是一个流行的代码语法高亮库，广泛应用于前端开发中。当开发者尝试将highlight.js与Rollup打包工具结合使用时，可能会遇到一些配置问题。本文将详细分析这些问题的根源，并提供有效的解决方案。

问题现象

当开发者通过npm安装highlight.js并尝试在TypeScript项目中使用Rollup进行打包时，通常会遇到两类主要错误：

1. 模块导出错误：Rollup提示"default" is not exported by "node_modules/highlight.js/lib/index.js"
2. 类型声明缺失：TypeScript编译器提示找不到@highlightjs/cdn-assets模块的类型声明文件

问题分析

这些问题的根源在于highlight.js的模块系统设计。highlight.js提供了多种构建版本：

1. CommonJS版本：位于lib目录下，使用传统的module.exports导出方式
2. ES模块版本：位于es目录下，使用现代ES模块的import/export语法
3. CDN优化版本：通过@highlightjs/cdn-assets包提供

当Rollup尝试处理highlight.js的ES模块版本时，由于模块间的引用关系，可能会产生导出不匹配的问题。而TypeScript的类型检查系统则需要明确的类型声明文件才能正常工作。

解决方案

方案一：使用CDN资源构建版本

highlight.js团队推荐使用@highlightjs/cdn-assets包来解决打包问题：

1. 安装CDN资源包：

npm install @highlightjs/cdn-assets

2. 在代码中导入ES模块版本：

import hljs from '@highlightjs/cdn-assets/es/highlight.js'

方案二：处理TypeScript类型声明

对于TypeScript项目，需要额外处理类型声明问题：

1. 创建自定义类型声明文件(如highlight.d.ts)：

declare module '@highlightjs/cdn-assets/es/highlight.js' {
  const hljs: any;
  export default hljs;
}

2. 或者在tsconfig.json中添加类型忽略：

{
  "compilerOptions": {
    "noImplicitAny": false
  }
}

方案三：调整Rollup配置

在rollup.config.js中添加以下配置可以解决模块导出问题：

export default {
  // ...其他配置
  plugins: [
    resolve({
      mainFields: ['module', 'main']
    }),
    commonjs({
      include: /node_modules/
    })
    // ...其他插件
  ]
}

最佳实践建议

1. 对于新项目，建议直接使用highlight.js的ES模块版本
2. 在TypeScript项目中，推荐使用自定义类型声明而非完全禁用类型检查
3. 保持Rollup及其插件的更新，新版Rollup对ES模块的支持更好
4. 考虑等待highlight.js v12的发布，该版本将完全转向ES模块

通过以上解决方案，开发者可以顺利地在Rollup项目中使用highlight.js实现代码高亮功能，同时保持TypeScript类型系统的完整性。