rollup打包产物报错global未定义

问题描述

在用rollup打包了包含socket.io-client库的项目后，其他项目引入这个打包产物会报错提示global is not defined。

查看源码，报错位置在const globalThisShim = global;这行。其实产物里有global的定义window.global = window;但是这行代码在const globalThisShim = global;之后执行，导致找不到global变量。

网上给的方案基本都是提前写个<script>window.global = window;</script>插入到脚本最前面执行。但是我打包的库是需要给其他项目用的。不能让每个使用者都自己加一下这个代码去修复，这个方案显得太low

问题定位

我根据代码追溯后发现，const globalThisShim = global;这行代码来自socket.io-client依赖里的engine.io-client的这个包。后来我想为什么socket.io-client这个库打包给别人用就没有出现global is not defined这个问题，难道是我打包配置不对。于是我去看socket.io-client源码仓库，巧的是这个库也是用rollup打包的。对比我和socket.io-client库的rollup打包配置，我终于现了问题所在。

解决方案

其实问题解决起来也简单，需要修改@rollup/plugin-node-resolve插件配置，加上一句browser: true告诉rollup打包产物要适配浏览器环境，这样const globalThisShim =就会被赋值成别的值，而不是global，也就完美消除了错误

import { nodeResolve } from '@rollup/plugin-node-resolve'

export default {
    plugins: [
        ...
        nodeResolve({
            browser: true,
        }),
        ...
    ]
}