如何通过Webpack为PrismJS加载Kotlin、Gradle等语言包？

1. 「Cannot find module 'prismjs/components/prism-gradle'」报错原因与解决 #

不需要额外安装任何第三方包，prismjs核心包已经包含所有官方支持的语言组件。报错的根本原因是你在babel-plugin-prismjs配置中使用了错误的组件名称。

Prism的组件名称严格对应其components/目录下的文件名：

• Kotlin的正确组件名是prism-kotlin
• Gradle没有独立的Prism组件，它属于Groovy语法子集，需配置prism-groovy；若你使用的Prism版本已新增独立Gradle组件，确认组件文件名是prism-gradle.js后再使用该名称

2. 正确的babel-plugin-prismjs配置示例 #

在你的Babel配置文件（.babelrc或babel.config.js）中，确保languages数组内的名称完全匹配组件文件名：

module.exports = {
  plugins: [
    ['prismjs', {
      languages: ['javascript', 'xml', 'kotlin', 'groovy'],
      plugins: ['line-numbers'], // 按需添加插件
      theme: 'tomorrow',
      css: true
    }]
  ]
};

3. 自动加载器与babel-plugin-prismjs的冲突处理 #

官方明确禁止同时使用两者，因为加载逻辑互斥：

• babel-plugin-prismjs是构建阶段静态打包你配置的所有语言、插件
• 自动加载器是运行时动态加载缺失组件

针对异步加载HTML的高亮需求，提供两种可行方案：

方案一：保留babel-plugin-prismjs（推荐） #

提前在Babel配置中声明所有可能用到的语言组件，构建时一并打包。异步HTML加载完成后，直接调用Prism的高亮方法：

import Prism from 'prismjs';

// 异步内容加载完成后执行
const highlightAsyncContent = () => {
  Prism.highlightAll();
};

方案二：弃用babel-plugin-prismjs，改用手动加载+自动加载器 #

若需支持大量小众语言、不想全部打包，可移除babel-plugin-prismjs，手动引入核心及常用组件，再配合自动加载器处理剩余语言：

import Prism from 'prismjs';
import 'prismjs/components/prism-kotlin';
import 'prismjs/components/prism-groovy';
import 'prismjs/plugins/autoloader/prism-autoloader';

// 自动加载器会自动加载未提前引入的组件
Prism.highlightAll();

注意：需确保打包工具（如Webpack）能正确解析prismjs的components目录路径，必要时可配置resolve别名。

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