如何开发可同时在Node.js和浏览器运行、支持读取包内文件的ES模块

你可以根据包体积要求、业务场景选择以下两种常用实现方案：

方案1：预构建内嵌文本内容（兼容性最优，推荐） #

这套方案完全规避不同环境的IO差异，不需要额外适配就能兼容Node、浏览器、所有主流打包工具。

• 实现步骤：发布前运行预构建脚本，把english_words.txt的内容转成JS数组直接导出，生成单独的依赖文件
  示例预构建脚本（可存为scripts/build-words.js）：

  import fs from 'fs'
  import path from 'path'
  // 读取txt内容
  const wordContent = fs.readFileSync(path.resolve(import.meta.dirname, '../english_words.txt'), 'utf8')
  // 生成JS导出代码
  const outputCode = `export default ${JSON.stringify(wordContent.split('\n'))}`
  // 写入到源码目录
  fs.writeFileSync(path.resolve(import.meta.dirname, '../src/words.js'), outputCode)
  

  在package.json里配置自动执行钩子，发布前自动跑脚本：

  {
    "scripts": {
      "prepublishOnly": "node scripts/build-words.js"
    }
  }
  

• 调整你的主入口index.js逻辑，直接引入预生成的数组即可，不需要再做文件读取：

  import englishWords from './words.js'
  export const isEnglishWord = word => englishWords.includes(word)
  

• 优缺点说明：
  • 优势：零运行时IO开销、所有环境无需额外配置、同步API和你原有代码完全兼容
  • 劣势：如果单词表体积超过100KB，会增加JS初始加载体积，对浏览器端体积敏感的场景可以选方案2

方案2：条件导出分环境实现（适合大体积静态资源） #

如果你不想把文本内嵌到JS，需要单独加载资源，可以用这套逻辑：

第一步：配置package.json条件导出 #

让打包工具和运行环境自动匹配对应入口：

{
  "exports": {
    "node": "./index-node.js",
    "browser": "./index-browser.js",
    "default": "./index-browser.js"
  }
}

第二步：分别实现两个环境的入口 #

• Node端入口index-node.js直接复用你原有逻辑即可，Node 20+可以用import.meta.dirname简化写法：

  import fs from 'fs'
  import path from 'path'
  const dictionaryFile = path.resolve(import.meta.dirname, 'english_words.txt')
  const englishWords = fs.readFileSync(dictionaryFile, 'utf8').split('\n')
  export const isEnglishWord = word => englishWords.includes(word)
  

• 浏览器端入口index-browser.js用fetch异步加载资源，需要注意打包工具的静态资源处理规则：

  // 导入txt资源路径，现代打包工具会自动处理为正确的部署路径
  import txtUrl from './english_words.txt?url'
  let englishWords = null
  // 异步初始化词表
  async function initDict() {
    if (englishWords) return
    const res = await fetch(txtUrl)
    const text = await res.text()
    englishWords = text.split('\n')
  }
  // 对外暴露的API改成异步，和Node端API差异需要在文档说明
  export const isEnglishWord = async (word) => {
    await initDict()
    return englishWords.includes(word)
  }
  

打包工具适配说明 #

使用方案2时需要在README补充说明：

• 浏览器端调用isEnglishWord需要加await
• 旧版Webpack用户需要配置asset/resource规则处理txt后缀文件，Vite/Rollup用户无需额外配置

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