javascript - 使用 Webpack 时如何在 Service Worker 中导入脚本

Question

在 Service Worker 中，我尝试使用 importScripts 导入另一个帮助脚本，但我不断收到 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:5000/src/js/utility.js' failed to load.
我在 Service Worker 中有以下代码:

importScripts('../src/js/utility.js');

workbox.routing.registerRoute(/.*(?:jsonplaceholder\.typicode)\.com.*$/, function(args){
    console.log('Json placeholder being called');
    // Send request to the server.
    return fetch(args.event.request)
        .then(function(res){
            // Clone the response obtained from the server.
            var clonedRes = res.clone();
            // Clear data stored in the posts store.
            clearAllData('posts') // Function from helper file
                .then(function(){
                    return clonedRes.json()
                })
                .then(function(data){
                    for(var key in data){
                        // Write the updated data to the posts store.
                        writeData('posts', data[key]) // Function from helper file
                    }
                });

            return res;
        })
});

workbox.precaching.precacheAndRoute(self.__precacheManifest);

在 utility.js我有以下代码:

import { openDB } from 'idb';

export function writeData(st, data){
    console.log(st, data);
}

export function clearAllData(st){
    console.log(st);
}

这些功能还没有做任何事情，但即使是这些占位符也不起作用!最终我希望能够使用 idb npm 模块，这就是我在帮助程序中执行此操作的原因，因此我也可以从我的普通 Javascript 文件中使用它。

另外我正在使用 Webpack 来构建我的文件，在另一个我不使用它的项目中，它工作正常，但是在这个项目中它只是在构建后找不到文件，所以我想 Webpack 可能是搞砸了。

提前致谢 :)

Answer 1

如果您非常仔细地查看错误消息，您会发现问题所在:)

您的 Service Worker 脚本尝试导入“/src/js/utility.js”，但它不可用。如果您打开浏览器并转到该地址，您能看到该文件吗？我很确定你不能:)

当您使用 webpack 构建应用程序时，它很可能会将所有文件放到一个名为“dist”的目录中。您的 Service Worker 只能导入这些文件。想一想:当你在某个地方部署应用程序时，只有 dist/中的文件会在服务器上，而不是 src/中的文件，对吧？因此，SW 脚本无法导入您希望它导入的文件。

遗憾的是，我不是 webpack 专家，所以我不确定如何告诉 webpack 为您捆绑文件并将其包含在您的 Service Worker 脚本文件中:-/