小编FTW*_*ton的帖子

将函数传递给使用webpack导入类的Web Worker

我想将一个简单的函数传递给Web Worker,而不是直接在Web Worker中编写它。我知道这不可能直接实现,但是在很多情况下,您可以通过调用toString()函数并eval在工作线程中调用该字符串来“解决”此问题。

我在其他地方没有看到的警告是,此函数使用从另一个模块导入的类。(我正在使用webpack。)

使用此功能: () => new MyClass();

调用toString()它可以得到:

() => {
  return new _MyClass__WEBPACK_IMPORTED_MODULE_5__["MyClass"]();
}
Run Code Online (Sandbox Code Playgroud)

这是有道理的,就像MyClass从另一个模块导入的一样。问题是eval在工作程序中对此进行调用会产生错误:

ReferenceError:_MyClass__WEBPACK_IMPORTED_MODULE_5__未定义

同样,这是有道理的,因为该类未导入到工作程序的模块中。但是有什么办法可以解决这个问题?在编写工作者时,该函数引用的类将不知道。

毫不奇怪,无论是使用worker-loader还是使用以下对象URL创建worker,我都会得到以下结果:

new Worker(URL.createObjectURL(new Blob([functionString])));
Run Code Online (Sandbox Code Playgroud)

我尝试在传递给工作程序的函数中使用动态导入,但是由于似乎工作程序不希望执行动态导入,因此此操作仍然失败:

() => {
  return import ('./MyClass')
    .then(module => new module.MyClass());
}
Run Code Online (Sandbox Code Playgroud)

ReferenceError:__webpack_require__未定义

有什么聪明的方法可以解决此问题,还是我应该放弃并希望为我要实例化的每个类编写一个不同的工作程序?

javascript import module web-worker webpack

8
推荐指数
1
解决办法
202
查看次数

单排网格,高度为1fr,未在Chrome中填充高度

我在Flexbox列中有一个CSS Grid,并且网格有flex-grow: 1.

在Chrome中,网格会扩展以填充可用空间,但其内容不会,即使align-content: stretch在网格上也是如此.在Firefox和Edge中,内容会根据需要扩展以填充网格的高度.

这是一支可以重现问题的笔,以及它在不同浏览器中的外观图像.这是Chrome的错误,如果是这样,任何人都可以建议一个简单的解决方法吗?

在镀铬物的笔,显示臭虫

火狐

在Firefox中使用笔,显示所需的行为

边缘

笔在边缘,显示所需的行为

#wrapper {
  display: flex;
  flex-direction: column;
  height: 15rem;
  background-color: #aaa;
}

#grid {
  flex-grow: 1;
  display: grid;
  background-color: #ccf;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  align-content: stretch; /* "end" correctly puts the row to the bottom */
}

#left {
  background-color: #fcc;
}

#right {
  background-color: #cfc;
}
Run Code Online (Sandbox Code Playgroud)
<div id="wrapper">
  <div id="top">not in grid</div>

  <div id="grid">
    <div id="left">left</div>
    <div id="right">right</div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

css google-chrome css3 flexbox css-grid

6
推荐指数
1
解决办法
651
查看次数