您如何使用剧作家在浏览器上下文中导入本地模块？

发布于 2025-01-22 13:35:34 字数 404 浏览 4 评论 0 原文

这是我要做的事情的一个示例：

../ src/foo/bar.ts 是本地打字稿文件，

该文件中的代码旨在在浏览器上下文中运行（IT访问它 websockets ），因此我需要在 page.evaluate

page.evaluate( async () => {
    const { namedExportExample } = await import('../src/Foo/Bar;)

    // ...
});

我获取 page.evaluate：typeError：无法解决模块指定器和i''毫不奇怪，我不确定浏览器如何评估该导入，但是我想知道是否有办法执行此操作？

原文

Here's an example of what I'm trying to do:

../src/Foo/Bar.ts is a local typescript file

The code in the file is meant to run in a browser context (it accesses WebSockets), so I need to run it in page.evaluate

page.evaluate( async () => {
    const { namedExportExample } = await import('../src/Foo/Bar;)

    // ...
});

I get page.evaluate: TypeError: Failed to resolve module specifier and I'm not surprised, I'm not sure how the browser can evaluate that import, but I'd like to know if there's a way to do this if possible?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

幼儿园老大 2025-01-29 13:35:34

我不确定浏览器如何评估该导入，但是我想知道是否有办法执行此操作？

由于 @Max-Schmitt解释的原因，您无法导入模块。但是剧作家的“上下文”提供了一种在浏览器实例中注入新功能的方法。

browserContext.exposeFunction(name, callback)

示例

import * as crypto from "node:crypto" 

const browser = await chromium.launch(...)
const context = await browser.newContext()
    
// !!! Exposing a new function !!!
await context.exposeFunction("sha256", text => crypto.createHash('sha256').update(text).digest("hex")) 

const page = await context.newPage()
await page.goto(URL)

...
await someBox.evaluate((box : HTMLElement) => {
  console.log("!!!", window["sha256"]) // available !!!
  ...
})

I'm not sure how the browser can evaluate that import, but I'd like to know if there's a way to do this if possible?

You can't import modules for reasons explained by @max-schmitt. But Playwright's "Context" provides a way to inject new functions in the browser instance.

browserContext.exposeFunction(name, callback)

https://playwright.dev/docs/api/class-browsercontext#browser-context-expose-function

Example

import * as crypto from "node:crypto" 

const browser = await chromium.launch(...)
const context = await browser.newContext()
    
// !!! Exposing a new function !!!
await context.exposeFunction("sha256", text => crypto.createHash('sha256').update(text).digest("hex")) 

const page = await context.newPage()
await page.goto(URL)

...
await someBox.evaluate((box : HTMLElement) => {
  console.log("!!!", window["sha256"]) // available !!!
  ...
})

回复收藏 0 原文