React项目中动态导入包时如何获取text/plain格式的原始数据？

AI 小北

2026-8-20

解决方案：用fetch直接请求资源获取原始文本

import()是专门用于加载并解析JavaScript模块的API，会被打包工具（Webpack/Vite等）处理并编译，没办法直接拿到原始文件内容。要获取服务器返回的原始文本数据，你需要用HTTP请求直接拉取资源文件，具体步骤如下：

核心思路

放弃import()，改用fetch发起请求，通过response.text()获取未被编译的原始文本内容。关键是要确定目标包文件的可访问URL。

具体实现

1. 确定资源URL

根据你的场景选择对应的URL：

本地静态资源：把目标文件放在项目的public目录下，URL直接写/文件名.js（比如/my-package.js）
npm包资源：通过CDN获取原始文件，示例：https://unpkg.com/lodash@4.17.21/lodash.js
开发环境访问node_modules文件：配置打包工具允许访问node_modules，比如Vite在vite.config.js里加server.fs.allow: ['../node_modules']，然后URL写/node_modules/包名/目标文件.js

2. 代码示例

async function getRawPackageContent() {
  try {
    // 替换成你的目标资源URL
    const resourceUrl = 'https://unpkg.com/lodash@4.17.21/lodash.js';
    const response = await fetch(resourceUrl);
    
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    
    // 获取原始文本
    const rawText = await response.text();
    // 这里执行你的业务逻辑
    do_something(rawText);
  } catch (err) {
    console.error('获取原始数据出错：', err);
  }
}