Rollup打包后函数调用早于定义致Readable$1未定义报错如何解决？

问题根因 #

该问题通常由 Rollup 处理 CommonJS 模块时依赖分析偏差导致：当 CommonJS 模块存在循环依赖、或模块内部的变量提升逻辑未被 Rollup 正确识别时，就会出现导出变量赋值早于定义的情况。

可落地解决方案 #

• 调整 @rollup/plugin-commonjs 配置，开启严格依赖顺序校验
  该插件默认会对 CommonJS 模块做简化处理以提升打包速度，可能打乱原有模块的执行顺序，开启 strictRequires 后会完全遵循原 CommonJS 代码的 require 顺序执行，从根源解决顺序错乱问题
  配置示例：

  // rollup.config.js
  import commonjs from '@rollup/plugin-commonjs';
  
  export default {
    plugins: [
      commonjs({
        strictRequires: true
        // 若打包速度受影响，可仅指定问题依赖开启：
        // strictRequires: ['readable-stream']
      })
    ]
  }
  

• 检查 Babel 配置，关闭模块转译
  如果 Babel 预设将代码转译为 CommonJS 格式再输入给 Rollup，会破坏 Rollup 原生的 ESM 依赖分析能力，必须将 Babel 的 modules 配置设为 false
  配置示例：

  // babel.config.json
  {
    "presets": [
      ["@babel/preset-env", {
        "modules": false
      }]
    ]
  }
  

• 入口文件提前导入问题依赖
  直接在入口文件最顶部提前导入出现顺序问题的依赖，强制该依赖优先初始化完成
  示例：

  // 入口文件首行添加
  import 'readable-stream';
  // 其余导入放在该行之后
  

• 调整 output.hoistTransitiveImports 配置
  若打包后变量分散在不同 Chunk 导致顺序问题，可将该配置设为 false，禁止 Rollup 自动提升跨 Chunk 的导入语句
  配置示例：

  // rollup.config.js
  export default {
    output: {
      hoistTransitiveImports: false,
      // 其余output配置
    }
  }
  

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