Nuxt.js使用shikiji高亮Markdown代码时构建出现警告求助

问题场景 #

使用Nuxt.js + Nuxt Content模块搭建博客，配置shikiji实现Markdown代码块高亮时，项目构建阶段控制台出现如下警告：

WARN  (inject plugin) rollup-plugin-inject: failed to parse D:/(PATH)/(PROJECT_NAME)/node_modules/shikiji/dist/onig.wasm. Consider restricting the plugin to particular files via options.include

当前nuxt.config.js中的高亮配置为：

content: {
    highlight: {
      theme: 'github-light'
    }
},

解决方案 #

通过在nuxt.config.js中调整rollup-plugin-inject的include配置，限制插件仅处理JS/TS文件，避免解析wasm格式文件。修改后的完整配置如下：

export default defineNuxtConfig({
  content: {
    highlight: {
      theme: 'github-light'
    }
  },
  build: {
    extend(config) {
      // 定位rollup-plugin-inject插件实例
      const injectPlugin = config.plugins?.find(plugin => plugin.name === 'inject')
      if (injectPlugin) {
        // 限制插件仅处理JS/TS文件
        injectPlugin.options.include = /\.(js|ts)$/
      }
    }
  }
})

原理说明 #

rollup-plugin-inject的作用是在JS/TS文件中注入全局变量，它不具备解析wasm二进制文件的能力。shikiji依赖的onig.wasm被该插件误触发解析，导致警告。通过设置include规则限定处理范围，即可消除警告，同时不影响shikiji的代码高亮功能。

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