Rollup正确打包Node依赖（three.js、deck.gl等）的方法是什么？

两个配置都没搭全Rollup处理Node生态依赖的必要插件，且对插件作用理解有误：

1. rollup-plugin-node-externals的唯一作用是把node_modules下的依赖标记为外部资源、排除出打包流程，本身不具备依赖解析、打包能力，设置deps:false也不会帮你把依赖打进产物。
2. 单独使用@rollup/plugin-node-resolve只完成了「在node_modules里找依赖文件路径」的步骤，没有处理CommonJS格式模块——three.js子模块、deck.gl生态大量包采用CommonJS规范导出，Rollup原生仅支持ES Module解析，直接构建就会抛Unresolved dependencies错误。
3. 你配置IIFE格式输出时没加必填的output.name字段，即使依赖解析正常也会构建失败。

1. 安装必要依赖 #

npm i -D @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-json rollup-plugin-terser

如果构建deck.gl时提示缺少process/Buffer等Node内置变量，再额外装polyfill和注入插件：

npm i -D @rollup/plugin-inject process buffer

2. 可用的Rollup配置 #

下面的配置直接实现你要的双产物需求：一个不打包外部依赖、一个全量打包所有依赖的IIFE产物：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import inject from '@rollup/plugin-inject';
import { terser } from 'rollup-plugin-terser';

// 全量打包依赖用的插件组
const bundleAllPlugins = [
  inject({
    // 适配deck.gl依赖的Node内置变量，没报对应错可以删掉这部分
    process: 'process/browser',
    Buffer: ['buffer', 'Buffer']
  }),
  resolve({
    browser: true, // 优先加载依赖为浏览器环境提供的入口文件
    preferBuiltins: false, // 不优先打包Node内置模块
    extensions: ['.js', '.mjs', '.cjs', '.json'] // 自动补全的文件后缀
  }),
  commonjs(), // 将CommonJS格式依赖转换为Rollup可处理的ESM格式
  json() // 支持依赖内的JSON文件导入
];

// 不打包外部依赖的配置项
const externalList = [/^three/, /^@deck.gl\//];
const globalVariableMap = {
  three: 'THREE',
  '@deck.gl/core': 'deck',
  '@deck.gl/layers': 'deck'
};

export default [
  // 产物1：不打包外部依赖，体积更小，使用时需要提前在页面引入three、deck.gl的CDN资源
  {
    input: "./Src/index.js",
    external: externalList,
    output: {
      file: "./Build/pgl.js",
      format: "iife",
      name: "PGL", // IIFE格式必填，指定库挂载到window的全局变量名
      globals: globalVariableMap
    }
  },
  // 产物2：全量打包所有依赖，单文件可直接通过script标签引入使用
  {
    input: "./Src/index.js",
    output: {
      file: "./Build/pgl_module.min.js",
      format: "iife",
      name: "PGL",
      sourcemap: true,
      plugins: [terser()] // 压缩生产产物
    },
    plugins: bundleAllPlugins
  }
];

• 引入three.js的examples/jsm下子模块时，如果遇到路径解析报错，检查导入路径是否写全文件名，部分版本three的子模块导入没有自动补全后缀的配置，需要手动写全.js后缀。
• 如果不需要兼容旧浏览器，可以去掉terser压缩配置，加快构建速度。
• 全量打包deck.gl时如果产物体积过大，可以按需引入deck.gl的模块，不要整包导入。

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