Prismjs安装，ERROR (0 , _vitePluginPrismjs.default) is not a function 报错及解决

在使用 Vite 构建前端项目时，代码高亮是一个常见的需求。PrismJS 是一个轻量级且可扩展的代码高亮库，而 vite-plugin-prismjs 则是专门用于在 Vite 项目中集成 PrismJS 的插件。本文将详细介绍 PrismJS 和 vite-plugin-prismjs 的功能，并解决在安装和配置过程中遇到的常见错误。

解决 vite-plugin-prismjs 安装和配置中的错误

PrismJS 简介

PrismJS 是一个用于在网页上显示语法高亮代码的库。它轻量、可扩展，支持多种编程语言和主题。PrismJS 的主要优点包括：

• 简洁美观：提供多种预设主题，可以根据项目需求选择合适的主题。
• 按需加载：可以选择性地加载特定语言的语法高亮支持，减少包大小。
• 可扩展性：支持插件机制，可以扩展功能，如行号、复制按钮等。
• 快速：PrismJS 使用高效的算法来解析和高亮代码，确保快速加载。

vite-plugin-prismjs 简介

vite-plugin-prismjs 是一个专门用于在 Vite 项目中集成 PrismJS 的插件。它简化了 PrismJS 的配置过程，使得在 Vite 项目中使用 PrismJS 变得更加便捷。以下是 vite-plugin-prismjs 的主要功能：

• 自动集成：自动为项目中的代码块应用语法高亮。
• 按需加载：可以根据需要选择特定语言的语法高亮支持。
• 主题支持：支持多种预设的主题。
• 插件支持：可以配置和启用 PrismJS 的插件，如行号、复制按钮等。

安装

你可以使用 npm 或 yarn 安装 vite-plugin-prismjs 及 PrismJS：

npm install prismjs -S
npm install vite-plugin-prismjs -D

或者使用 yarn：

yarn add prismjs
yarn add vite-plugin-prismjs --dev

配置

在 Vite 项目的配置文件（通常是 vite.config.js 或 vite.config.ts）中，你可以添加 vite-plugin-prismjs 的配置。以下是一个示例配置：

import { defineConfig } from 'vite';
import { prismjsPlugin } from 'vite-plugin-prismjs';

export default defineConfig({
  plugins: [
    prismjsPlugin({
      languages: [
        'js', 'javascript', 'html', 'xml', 'css', 'bash', 'dart', 'dockerfile',
        'go', 'kotlin', 'lua', 'markdown', 'nginx', 'php', 'python', 'ruby',
        'shell', 'sql', 'swift', 'vim', 'yaml'
      ],
      plugins: ['line-numbers'], // 配置行号插件
      theme: 'coy',              // 主题名
      css: true                  // 是否加载 CSS
    })
  ]
});

常见错误及解决

在配置 vite-plugin-prismjs 时，可能会遇到以下错误：

ERROR  (0 , _vitePluginPrismjs.default) is not a function

这个错误通常是由于导入插件的方式不正确导致的。下面我们将详细介绍如何正确导入和配置 vite-plugin-prismjs。

错误原因

错误信息 (0 , _vitePluginPrismjs.default) is not a function 表明 _vitePluginPrismjs.default 不是一个函数。这通常是因为导入插件的方式不正确。例如，原本的导入语句可能是：

import prismjs from 'vite-plugin-prismjs';

然后尝试使用 prismjs()，这会导致错误，因为 prismjs 不是一个函数。

正确的导入方式

正确的导入方式应该是：

import { prismjsPlugin } from 'vite-plugin-prismjs';

然后使用 prismjsPlugin() 来配置插件。

正确的配置示例

以下是正确的配置示例：

1. 安装依赖：

   npm install prismjs -S
   npm install vite-plugin-prismjs -D
   

   或者使用 yarn：

   yarn add prismjs
   yarn add vite-plugin-prismjs --dev
   

2. 配置 vite.config.js：

   import { defineConfig } from 'vite';
   import { prismjsPlugin } from 'vite-plugin-prismjs';
   
   export default defineConfig({
     plugins: [
       prismjsPlugin({
         languages: [
           'js', 'javascript', 'html', 'xml', 'css', 'bash', 'dart', 'dockerfile',
           'go', 'kotlin', 'lua', 'markdown', 'nginx', 'php', 'python', 'ruby',
           'shell', 'sql', 'swift', 'vim', 'yaml'
         ],
         plugins: ['line-numbers'], // 配置行号插件
         theme: 'coy',              // 主题名
         css: true                  // 是否加载 CSS
       })
     ]
   });
   

解决步骤

1. 安装依赖：
   确保你已经正确安装了 prismjs 和 vite-plugin-prismjs。

2. 导入插件：
   使用正确的导入方式：

   import { prismjsPlugin } from 'vite-plugin-prismjs';
   

3. 配置插件：
   在 vite.config.js 中添加插件配置：

   export default defineConfig({
     plugins: [
       prismjsPlugin({
         languages: [
           'js', 'javascript', 'html', 'xml', 'css', 'bash', 'dart', 'dockerfile',
           'go', 'kotlin', 'lua', 'markdown', 'nginx', 'php', 'python', 'ruby',
           'shell', 'sql', 'swift', 'vim', 'yaml'
         ],
         plugins: ['line-numbers'], // 配置行号插件
         theme: 'coy',              // 主题名
         css: true                  // 是否加载 CSS
       })
     ]
   });
   

4. 验证配置：
   运行 yarn install 或 npm install 来验证配置是否正确。确保没有报错信息。

示例代码块

在你的项目中，你可以通过以下方式来显示语法高亮的代码块：

```javascript
console.log('Hello, world!');

这样，PrismJS 会自动为这段代码应用指定的主题和插件效果。

总结

通过正确安装和配置 vite-plugin-prismjs，你可以轻松地在 Vite 项目中实现代码高亮，提升项目的可读性和美观度。遇到 (0 , _vitePluginPrismjs.default) is not a function 错误时，确保使用正确的导入方式，并按需配置语言和插件。希望本文能帮助你顺利集成和使用 PrismJS 在 Vite 项目中。