在服务工作者中使用browser.js

时间:2015-08-11 09:49:34

标签: ecmascript-6 web-worker babeljs service-worker

我们希望使用Service Worker来执行客户端源代码转换以进行开发。我们希望使用Babel将ES6 + / ES2015文件转换为ES5模块。

但是,使用importScripts在服务工作者中包含browser version babel会导致以下错误:

GET http://localhost:8080/babel-core/browser.js net::ERR_FAILED

Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:8080/babel-core/browser.js' failed to load.

所以,问题是,如何正确地将babel导入服务工作者。

编辑:这不是明显的NetworkError,因为我们可以将文件的内容更改为简单的内容,这使我们能够实际加载和执行文件。此外,该文件可以加载正常的<script>标记。

edit2:要获取此消息,请检查此存储库https://github.com/onsetsu/lively4-core.git,在端口8080启动本地服务器,最后加载http://localhost:8080/bootworker.html。我们目前正在使用Chrome 44。

2 个答案:

答案 0 :(得分:3)

我的实验https://github.com/bahmutov/babel-service怎么样 - 你可以在https://babel-service-demo.herokuapp.com/看到演示。

我正在使用功能测试来检测支持的功能并有选择地转换截获的代码。当然,这只是一个开始,只将默认参数映射到babel插件,但可以映射更多功能。

此外,功能测试背后的人正在讨论选择性转换https://github.com/getify/es-feature-tests/issues/9

答案 1 :(得分:2)

作为一般规则,使用服务工作者来获取对网站功能至关重要的内容并不是推荐的做法。服务工作人员旨在逐步增强,如果相关的服务工作人员不可用,您的网站应设计为仍可正常运行。

即使在支持服务工作者的浏览器中,如果用户轮班重新加载,或者如果它是第一个导航,则在服务工作者有机会控制之前,可能没有人控制您的页面。 / p>

要回答您的具体问题,服务工作者代码执行的ServiceWorkerGlobalScope会公开不同的功能而不是普通网页的全局范围,而browser.js脚本中会显示某些内容您尝试导入时假定只在普通页面中可用的功能。不幸的是,Chrome的DevTools,即使启用了调试器,也没有透露哪个特定语句导致了错误,所以我无法说出哪些确切的语句无效。