Rollup的externals与globals在ESM目标下如何工作？

首先得揪出你当前配置里的核心矛盾：你的入口文件里是直接导入具体文件路径../node_modules/hyperhtml/min.js，但Rollup的external配置是用来匹配模块名称（比如import {hyper} from 'hyperhtml'这种写法里的模块名），而不是具体的文件路径，所以现在Rollup根本识别不出这个导入属于你声明的external模块，自然globals和paths配置也不会生效。

接下来给你分步调整方案：

第一步：修正入口文件的导入写法 #

把入口文件里的导入改成标准的模块导入，不用写具体文件路径：

import { hyper } from 'hyperhtml';

这样Rollup才能关联到你external里配置的hyperhtml模块。

第二步：调整Rollup配置 #

根据你想要的输出格式（es模块），针对性调整配置：

• 对于es格式的输出，globals配置其实是无效的——globals只适用于umd或者iife这类需要在浏览器全局环境运行的格式。
• 如果你的es模块输出还是希望指向外部的hyperhtml文件，可以保留paths配置，但要确保路径相对最终输出文件的位置是正确的。

调整后的配置示例：

const external = ['hyperhtml']; 
const globals = { 'hyperhtml': 'hyperHTML' }; 
export default [ 
  { 
    external, 
    input: 'src/foo-bar.mjs', 
    plugins: [], 
    output: [
      // es格式输出配置
      { 
        file: 'dist/foo-bar.mjs', 
        format: 'es', 
        paths: { hyperhtml: '../node_modules/hyperhtml/min.js' }, 
      },
      // 若需同时支持浏览器全局环境，可添加umd格式输出
      {
        file: 'dist/foo-bar.umd.js',
        format: 'umd',
        name: 'FooBar', // 全局环境下的模块名称
        globals,
      }
    ]
  }, 
]; 

额外说明 #

• external的作用是告诉Rollup：这个模块不需要被打包进输出文件，而是留待外部环境提供。
• 当输出格式是es时，Rollup会保留import语句，paths会替换掉模块名对应的路径；如果是umd/iife格式，globals会把模块名映射成全局变量，比如浏览器里的window.hyperHTML。

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