解锁Rollup的原始资源导入能力：rollup-plugin-import-raw完全指南

Vite用户早已习以为常的功能，Rollup项目现在也能轻松实现了！

为什么需要导入原始文件内容？

在现代前端开发中，直接获取文件的原始字符串内容已成为高频需求场景：

动态加载SVG图标并直接注入DOM（避免额外HTTP请求）
读取GLSL着色器代码传递给WebGL渲染器
获取文本/配置文件内容进行运行时解析
通过模板文件生成动态代码

Vite的原生支持：优雅的解决方案

在Vite生态中，这一切只需一个简单的?raw后缀即可实现：

javascript 复制代码

// 导入GLSL着色器源码
import shaderCode from './shader.frag?raw'

// 导入SVG作为字符串
import iconSVG from './icon.svg?raw'

这种设计被深度整合进Vite核心，甚至出现在Vue官方工具链 中。例如在vuejs/repl项目中，源码通过以下方式直接获取用户输入的原始内容：

typescript 复制代码

// Vue REPL 源码中的真实应用
import rawSetupCode from '@/template/setup?raw'

其底层原理是：Vite在构建阶段识别?raw查询字符串，直接将文件内容转换为字符串字面量，无任何运行时开销。

rollup-plugin-import-raw：无缝填补Rollup缺口

安装一步到位

bash 复制代码

npm install rollup-plugin-import-raw --D

或

bash 复制代码

yarn add rollup-plugin-import-raw --D

或

bash 复制代码

pnpm add rollup-plugin-import-raw --D

配置简洁直观

javascript 复制代码

// rollup.config.js
import importRaw from 'rollup-plugin-import-raw'

export default {
  plugins: [
    importRaw() // 激活原始资源导入能力
  ]
}

使用方式自然

javascript 复制代码

// 导入文本文件
import poem from './assets/poem.txt?raw'

// 导入CSS字符串（用于运行时样式注入）
import styles from './styles.css?raw'

真实应用场景示例

场景1：动态加载SVG图标

javascript 复制代码

import logo from './logo.svg?raw'
document.querySelector('.app-header').innerHTML = logo

场景2：WebGL着色器管理

javascript 复制代码

import vertexShader from './shaders/vertex.glsl?raw'
const program = initShaderProgram(gl, vertexShader, fragmentShader)

场景3：通过模板生成动态代码

javascript 复制代码

// 导入代码模板
import componentTemplate from './templates/Component.vue?raw'

// 创建动态组件生成器
const generateVueComponent = (componentName, props) => {
  return componentTemplate
    .replace(/{{componentName}}/g, componentName)
    .replace('// {{props}}', 
      props.map(p => `  ${p.name}: ${p.type}`).join(',\n'))
}

// 使用模板生成具体组件
const userComponent = generateVueComponent('UserProfile', [
  { name: 'userId', type: 'Number' },
  { name: 'userName', type: 'String' }
])

// 输出结果：
// <template>
//   <div class="user-profile">
//     <h2>{{ userName }}</h2>
//     <p>User ID: {{ userId }}</p>
//   </div>
// </template>
// 
// <script>
// export default {
//   name: 'UserProfile',
//   props: {
//     userId: Number,
//     userName: String
//   }
// }
// </script>

应用场景扩展：

自动化生成API客户端代码
创建领域特定语言(DSL)编译器
构建低代码平台的代码生成器
开发脚手架工具的模板引擎

为什么选择这个插件？

当你的技术栈基于Rollup（如组件库开发），又需要Vite式的资源处理体验时，rollup-plugin-import-raw提供了平滑的技术迁移路径 。它解决了Rollup生态长期存在的资源处理短板，让开发者能在不切换构建工具的前提下，享受现代化开发体验。

GitHub项目地址 ：
github.com/kimverchan/...