如何使用Rollup将js文件作为字符串导入？

Rollup 完全可以实现和 Webpack raw-loader 一致的文件字符串导入需求，常用实现方式有两种：

方案1：使用官方插件 #

• 第一步：安装依赖
  执行命令：npm install @rollup/plugin-raw --save-dev
• 第二步：修改 rollup.config.js 配置

import raw from '@rollup/plugin-raw';

export default {
  // 入口、出口等其他原有配置保持不变
  plugins: [
    raw({
      // 配置需要作为字符串导入的文件匹配规则，可按需调整
      include: ['**/*.js', '**/*.txt', '**/*.glsl'],
      // 可选：配置需要排除的文件
      exclude: ['node_modules/**']
    })
  ]
}

• 第三步：直接导入使用
  代码中直接导入对应文件即可，导入结果就是文件的纯文本字符串：

import demoJsContent from './demo.js';
console.log(demoJsContent); // 输出demo.js的完整文本内容

方案2：手写自定义插件（无额外依赖） #

如果不想引入第三方依赖，也可以自己写一个极简插件实现相同功能，直接在rollup.config.js中添加如下代码即可：

// 自定义raw加载插件
const rawPlugin = {
  name: 'raw-plugin',
  transform(code, id) {
    // 匹配你需要处理的文件后缀，可按需调整
    if (id.endsWith('.js') || id.endsWith('.txt')) {
      return `export default ${JSON.stringify(code)};`;
    }
  }
}

export default {
  // 其他原有配置保持不变
  plugins: [rawPlugin]
}

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