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);
}

这些功能还没有做任何事情，但即使是这些占位符也不起作用！最终我希望能够使用idbnpm 模块，这就是我在帮助程序中这样做的原因，所以我也可以从我的普通 Javascript 文件中使用它。
另外我正在使用 Webpack 来构建我的文件，在另一个我不使用它的项目中，它工作正常，但是在这个项目中它只是在构建后找不到文件，所以我想 Webpack 可能是搞砸了。

提前致谢：）

score 4 · Accepted Answer

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

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

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

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

score 2 · Accepted Answer

发现要导入脚本文件，我必须将它们原样复制到 dist 文件夹中，否则 Service Worker 将无法使用它们。因此，我修改了vue.config.js文件以包含以下内容（在之后module.exports）：

chainWebpack: config => {
        config
            .plugin('copy')
            .tap(args => {
                args[0].push({
                    from: 'project-location\\src\\js', 
                    to: 'project-location\\dist'});
                return args;
            })
    },

这会将文件复制到文件src/js夹dist中，然后我们可以将它们导入到 Service Worker 文件中，并在文件顶部使用以下行：

importScripts('utility.js');

然而，我还没有找到导入 npm 模块的方法，所以我不得不idb用另一个idb.js文件替换模块，该utility.js文件使用类似的代码行导入到文件中：

importScripts('idb.js');

utility.js和都idb.js位于下src/js。

所以不是一个完美的解决方案，但它有效。感谢您pate为我指明正确的方向:)

score 1 · Accepted Answer

在这里，解决方法：

从您的服务器提供 javascript
self.importScripts()使用worker Api导入脚本，请参阅https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts。

链接：

score 0 · Accepted Answer

我使用 CopyWebpackPlugin 来解决这个问题。它允许您复制文件并替换内容。因此，在复制后，我从文件中删除了所有“导出”语句，这样我就只保留了一个版本。

new CopyWebpackPlugin ([{
  from: 'src/js/mylist.js',
  to: '',
  transform(content) {
    return content.toString().replace(/export /g, '');
  },
}])

npm install -D copy-webpack-plugin 安装它

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

4 回答 4

Related

Reference