是否有方法将CDN资源替换为离线资源

[arcelan]

由于网络原因，经常无法访问cdn资源，导致项目运行不起来
请问有没有手段使用本地的资源？

目前只看到 apps/playground/.umirc.ts 里面有一点点可以更改的地方

[ccloli]

是指沙箱里的依赖吗？如果没有比较好的网络环境的话，可能只能尝试私有化部署沙箱依赖的这些服务了，例如 dependency-packager 和 unpkg，然后修改沙箱的源码，将上面的服务的地址改成私有化服务的地址

不过私有化部署后估计也会遇到网络问题，因此你可能需要将 registry 指向国内的 mirror

具体私有化部署相关服务的方法，可以参考 https://juejin.cn/post/6882541950205952013#heading-8

[arcelan]

感谢回答，目前我是启动环境之后，在控制台看到了CDN访问的错误，还没有仔细研究是哪块的CDN资源
请问除了沙箱里面有CDN资源依赖，还有其他地方也依赖CDN吗？

然后修改沙箱的源码，将上面的服务的地址改成私有化服务的地址

这个是指在 https://github.com/NetEase/codesandbox-client.git 全局搜索替换吗？

[ccloli]

感谢回答，目前我是启动环境之后，在控制台看到了CDN访问的错误，还没有仔细研究是哪块的CDN资源
请问除了沙箱里面有CDN资源依赖，还有其他地方也依赖CDN吗？

项目的示例应用里用到的依赖，其 umd 资源都是从 cdn.jsdelivr.net 上加载的

沙箱自己安装依赖，会按照解析成功或失败依次按照 dependency-packager (prod-packager-packages.codesandbox.io)、jsdelivr（data.jsdelivr.com 与 cdn.jsdelivr.net）和 unpkg（unpkg.com）的顺序尝试安装依赖

这个是指在 https://github.com/NetEase/codesandbox-client.git 全局搜索替换吗？

是的，替换后需要重新构建资源

另外如果需要走私有化部署的方案，可能还需要屏蔽掉从 jsdelivr 安装依赖，来强制走 unpkg，具体来说应该是要改下面的部分：

https://github.com/NetEase/codesandbox-client/blob/master/packages/sandpack-core/src/npm/dynamic/fetch-protocols/index.ts#L46-L50C68

  {
    protocol: preloadedProtocols.unpkg,
    condition: () => true,
  },
  // { protocol: preloadedProtocols.jsdelivr, condition: () => true },

[arcelan]

首先感谢回答以及提供私有化部署的步骤。

我看了一下代码，还有一些其他疑问。

项目的示例应用里用到的依赖，其 umd 资源都是从 cdn.jsdelivr.net 上加载的

对于这一块，我理解应该就是 apps/playground/src/helpers/mock-files.ts 定义的 cdn 资源，
这里有一个疑问想确认一下，演示项目提供了一个 是否使用预构建 UMD 资源 的选项，

这个选项，不知以下理解对不对

1. 如果在这里手动填写一个cdn的地址，那sandbox iframe里面就加载这个地址，这个可以从控制台看到

2. 如果这里取消这个checkbox，那么sanbox是否也会按照以下顺序去加载cdn资源？只是不作为独立的js，而是一起打包到chunk里面

沙箱自己安装依赖，会按照解析成功或失败依次按照 dependency-packager (prod-packager-packages.codesandbox.io)、jsdelivr（data.jsdelivr.com 与 cdn.jsdelivr.net）和 unpkg（unpkg.com）的顺序尝试安装依赖

不过目前演示环境这样操作之后会报错

[ccloli]

这个选项，不知以下理解对不对

1. 如果在这里手动填写一个cdn的地址，那sandbox iframe里面就加载这个地址，这个可以从控制台看到
2. 如果这里取消这个checkbox，那么sanbox是否也会按照以下顺序去加载cdn资源？只是不作为独立的js，而是一起打包到chunk里面

沙箱自己安装依赖，会按照解析成功或失败依次按照 dependency-packager (prod-packager-packages.codesandbox.io)、jsdelivr（data.jsdelivr.com 与 cdn.jsdelivr.net）和 unpkg（unpkg.com）的顺序尝试安装依赖

是的，目前是这么一个逻辑，当指定了 UMD 资源后，沙箱会跳过该依赖的资源抓取，直接从指定的全局变量上抓取资源。如果没有指定 的话，自然会按照默认的逻辑加载

不过目前演示环境这样操作之后会报错

恭喜你发现了一个盲点，沙箱对 UMD 的支持是魔改了 CodeSandbox 的源码实现的，具体的实现可以参考 NetEase/codesandbox-client@7c6b640...e236ead （中间可能夹杂了其他的 commit，不过影响不大）

如上一个问题所述，魔改后的沙箱在加载 UMD 资源时，会跳过依赖获取与转译，并直接从全局变量上取值，从而优化项目的加载速度。不过上述 UMD 资源可以理解为是通过 <script> 标签直接加载的，并不是在 CodeSandbox 模拟的 CommonJS 上下文里执行的。因此，如果某个依赖 A 的 UMD 的资源 external 了另一个依赖 B，而依赖 B 不是通过 UMD 加载的，那么依赖 A 会因为在全局变量上找不到依赖 B 而报错

不过目前上面的情况不是什么大问题，因为应用的默认模板只会给 React 这类比较基础的依赖，以及基础组件库这类依赖了上述 external 掉的依赖添加 UMD 资源而已。对于非 UMD 引入（走默认的转译逻辑）的依赖，如果它们需要用到这些通过 UMD 加载的依赖，也是能通过上述修改的代码从全局变量上取值

---

至于之前提到的资源无法加载的问题，建议试试看将上一条回复中提到的域名加入代理，确认下是否能正常加载

[arcelan]

好的，明白了，就是不管怎么说，项目里面的dependencies肯定只能是在线资源的形式加载了，只是说通过代理还是私有化部署的方式。