Rollup打包ESM生成无效导入 浏览器加载报相对路径引用错误

问题根因 #

你遇到的报错核心是两个问题：

• 打包产物包含了http/https/url等仅Node.js环境存在的内置核心模块，浏览器原生不支持这类模块，直接引入就会报模块路径解析失败的错误
• UMD格式打包未声明外部依赖对应的全局变量名，所以出现了Missing global variable names的警告

解决方案 #

1. 配置Node模块浏览器适配 #

给@rollup/plugin-node-resolve添加browser: true配置，该配置会自动识别npm包的浏览器兼容版本，优先读取依赖包package.json中的browser字段，过滤Node专属的逻辑：

nodeResolve({
    mainFields: ['jsnext:main', 'module', 'main'],
    dedupe: [ 'react', 'react-dom' ],
    browser: true // 新增这一行
})

如果你的业务逻辑确实依赖http/stream等Node核心模块的浏览器实现，可安装rollup-plugin-polyfill-node插件，添加到plugins数组最前面即可自动注入对应polyfill。

2. 声明外部依赖与全局变量映射 #

你当前的配置没有声明external，Rollup会默认把所有node_modules的导入都尝试打进产物，如果希望把react、mobx-react等依赖作为外部依赖不打入产物，需要做如下配置：

export default {
    input: pkg.source,
    // 新增external数组，列出所有不需要打进产物的依赖
    external: ['react', 'react-dom', 'mobx-react'],
    output: [
        {
            file: pkg.module,
            format: 'es',
            sourcemap: false
        },
        {
            file: "dist/index.umd.js",
            format: 'umd',
            sourcemap: true,
            // 新增globals配置，对应UMD格式下外部依赖的全局变量名
            globals: {
                'react': 'React',
                'react-dom': 'ReactDOM',
                'mobx-react': 'mobxReact'
            },
            // 给UMD包指定全局导出名，方便浏览器直接通过全局变量访问
            name: '你的组件库全局名'
        },
    ],
    // 其余plugins配置保持不变
}

关于你提到的import {observer} from 'mobx-react'这类node_modules导入：Rollup本身可以正常处理，如果你没有将它加入external，Rollup会把mobx-react的代码直接打进你的bundle；如果加入了external，则需要用户在使用你的组件时自行引入mobx-react依赖。

3. 排查依赖兼容性 #

如果做完上述配置还是有Node核心模块的导入，需要检查你用到的第三方依赖是否本身不支持浏览器环境，或者你写的代码中意外引入了Node端专属的逻辑（比如调用fs模块、Node专属的API等），替换为浏览器兼容的实现即可。

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