Question

我正在使用网络工作者在我们的Ember应用程序中实现一项功能，并且无法确定如何打包工作源。

我的第一种方法是将worker.js放入assets目录，但在我们的配置中，资产是从生产中的其他服务器提供的，我们收到错误：

Failed to construct Worker: Script at https://static-assets.foo.com cannot be accessed from origin https://app.foo.com

我尝试使用document.domain进行预测（将其更改为foo.com），但错误仍然存在。

我想知道我是否可以修改ember-cli-build.js（又名Brocfile.js）以创建除app.js和vendor.js之外的另一个JS包（例如worker.js），它将部署在与这些位置相同的位置，并且可以在<script>中带有index.html标记。但是，由于app.js/vendor.js逻辑被烧成ember-cli，或者我缺乏对西兰花的了解，我无法弄清楚如何做到这一点。

接下来我考虑从blob创建worker。问题是在哪里存储blob的源代码。我考虑将blob的源代码放在<script>中的非标准index.html标记内，从中我可以检索它并创建blob。我不想直接将工作源插入index.html，所以我想使用broccoli-replace，但工作源是用ES6编写的，需要转换。我考虑使用ember附加组件，允许您使用index.html将内容插入{{content-for}}，但这需要我指定要插入的文本，而我不知道从哪里获取它来自，而且转化问题仍然存在。

然后我考虑了一些非常克隆的解决方案，例如将函数源包装在函数中，然后在运行时对函数进行字符串化并提取正文（在{}之间）。这是有效的，但恶臭有点压倒性，我不能使用任何ES6结构，如传播运算符或数组解构，导致Babel调用其像_toConsumableArray这样的小运行时实用程序。

任何合理的解决方案或方法可以使上述任何方法都有效吗？

Answer 1

西兰花很有意思。您需要Funnel和MergeTrees。

基本上在您的ember-cli-build.js中，您必须返回自己的树而不是app.toTree()。所以你可以这样做：

let workers = new Funnel('app/workers', {
    destDir: 'workers'
});

return new MergeTree([app.toTree(), workers]);

这基本上只是在构建期间将app/workers目录复制到dist/workers，并且还应用所有更改并触发实时重载。

Answer 2

不幸的是，不是一个直接的解决方案（pre-alpha），但请看一下：https://github.com/runspired/skyrocket

@ ebrahim-pasbani：由于Worker同源政策，CORS无法帮助您。对于快速而肮脏的修复，我使用了xhr（或$.getScript）。请参阅gist。

打包用于Ember.js的Web worker源

2 个答案: