如何通过snowpack-plugin-rollup-bundle让rollup-plugin-skypin适配Snowpack

你遇到的是两个连锁报错，分别解释如下：

• 第一个ReferenceError: fetch is not defined报错：你的构建运行在Node.js环境中，当前使用的skypin包加载的是浏览器端构建产物，依赖浏览器原生的fetch API请求Skypack资源，但低于18版本的Node.js并没有全局内置fetch方法，导致资源请求失败，工具返回空字符串。
• 第二个Entry module cannot be external (index.js)报错：这是前一个报错引发的连锁问题，同时你也存在配置错误：
  1. skypin的模块解析逻辑执行异常后，Rollup找不到你指定的入口文件，会默认将其标记为外部依赖，而Rollup本身不允许入口文件为外部依赖，直接抛出报错
  2. 你配置中写的入口路径index.js不符合实际项目结构，你的入口文件存放在src目录下，路径不匹配也会导致Rollup找不到入口。

这三个工具可以正常兼容使用，修改两个配置即可解决问题：

1. 给Node.js环境补全全局fetch能力：
   要么将本地Node.js版本升级到18及以上（该版本开始默认内置全局fetch），要么在snowpack.config.mjs的顶部添加如下代码：

   import fetch from 'node-fetch';
   globalThis.fetch = fetch;
   

   同时执行yarn add node-fetch@3 -D安装对应依赖（你的项目是ESM规范，需要安装3.x及以上版本的node-fetch）。
2. 修正snowpack.config.mjs中的入口配置，将config.inputOptions.input = 'index.js'修改为config.inputOptions.input = 'src/index.js'，匹配你实际的入口文件路径。

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