通过本地开发者的 ChromeDev 工具从实时站点劫持脚本

Question

尝试为我没有开发人员站点选项的客户端开发人员创建更简单的 dev-test-prod 工作流程。

我有一个实时站点，我只能通过基于浏览器的界面（想想 Wordpress/Shopify/等）将脚本添加到 HEAD。使用此选项，我已经能够通过添加对我在我管理的 CDN 中托管的 JavaScript 包（使用 webpack4 创建）的引用（启用了 CORS）来部署工作的客户端应用程序。没有开发站点。当我想对应用程序进行更改时，我一直在将这些更改部署为生产中的测试。为了避免对我的用户造成重大更改，我会反复进行非常小的更改，以便快速回滚。

我想做的是找到一种方法来改变我的体验，这样就我的体验而言，我在使用实时站点时劫持了对特定 JS 文件的请求。

我尝试使用 Chrome 的本地工作区和脱机文件功能，但我遇到了 webpack 生成的 JS 文件无法从本地环境加载并出现 CORS 错误的问题。但是其他脚本加载得很好。

具体来说：我有三个文件，alpha.js、beta.bundle.js 和 charlie.bundle.js... 后两个是 webpack 包，“alpha”文件是一个纯 JS 文件，在全局范围（类似于 Google Analytics 脚本的作用）。这三个都是从同一个 CDN 托管和加载的。我可以毫无问题地使用 Chrome 的脱机文件并劫持 alpha.js，但 beta 和 charlie 捆绑包会报告 CORS 问题。

两个问题：（1）为什么 webpack 包会导致 CORS 问题，而 alpha.js 文件不会（2）对于我想要实现的目标，是否有更好的选择（无需创建开发站点不是一个选项）？

Answer 1

Local Overrides 应该可以解决问题。

查看另一个Stack Overflow answer，我在其中解释了如何设置覆盖以及它们如何工作。

启用 Overrides 后，您需要将 alpha.js、beta.bundle.js 和 charlie.bundle.js 放入 Overrides 文件夹中。我认为文件的路径需要与生产中指定的路径相同。