捆绑一个小任务以使所有依赖项在 puppeteer 中可用？

Question

我个人一直在使用 puppeteer 进行大量部署和 UI 测试任务。

但我现在面临的问题是，我拥有的支持代码越多，就越难直接在浏览器中使用。

我通常做的是将我将在浏览器中使用的所有代码放在一个文件中，将整个模块编码为文本，使其可供浏览器使用，并在浏览器中使用动态导入。希望你看到我要去的地方......

如果我尝试添加第 3 方库，那么整个设置就会崩溃，因为我无法在单个文件中提供所有依赖项。

问题是：有人为此使用过任何模式吗？在这里捆绑一个选项吗？有什么例子吗？非常感谢...

Answer 1

正如我在上面的询问中所建议的，外部包的一种解决方案是通过 CDN 加载它们。

所以

var scriptElm = document.createElement('script');
scriptElm.src = 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js';
document.body.appendChild(scriptElm);

在尝试使用它之前，您必须确保它已正确加载，但这应该很容易。

编辑：

如果我使用的是 CDN，我不妨将它们直接导入到消费者文件中，例如：

import lodash from 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js';

捆绑一个小任务以使所有依赖项在 puppeteer 中可用？

bundling a small task to make all dependencies available in puppeteer?

javascript

webpack

babeljs

puppeteer