webpack/NPMにワークボックスを正しく統合するにはどうすればよいですか？

Question

私は現在かなりの規模のプロジェクトに取り組んでいます。多くの異なる依存関係が多数のファイルに広がっています。まず、これらの依存関係のほとんどを管理するためにNPMとwebpackを実行しています。ワークボックスのドキュメントには、webpack（これはまさに例です）またはNPMを介して、私がこれを統合するための2つの別々の方法があります。私はNPMの使用を試みることにしました。私は、次のコマンドを実行しました：

npm install --save-dev workbox-sw 

これはpackage.json依存関係のセクションに仕事箱-SWを追加しました。しかし、いつでも私が使用してインポートしよう：

import Workbox-SW from 'workbox-sw' 

それは私に次のエラーを与える：

Uncaught WorkboxError: An error was thrown by workbox with error code: ;'not-in-sw'

私はだけ単純に、いくつかの他の方法を試してみました。 webpackのドキュメントは間違いなく暗いです。これを正しく実行するには、他の依存関係をインストールしないでください。他のいくつかの重要な注意事項：私は

Vue.js

を使用しています

1. ルーティングを介して相互作用、私が作成した、いくつかの異なるコンポーネントがあります。私は特定のコンポーネントにインポートしようとしています。ここで

完全なエラーメッセージです：

Uncaught WorkboxError: An error was thrown by workbox with error code: ;'not-in-sw' 
    at eval (webpack-internal:///259:175:40) 
    at Object.<anonymous> (http://localhost:8080/app.js:2361:1) 
    at __webpack_require__ (http://localhost:8080/app.js:660:30) 
    at fn (http://localhost:8080/app.js:86:20) 
    at eval (webpack-internal:///173:3:69) 
    at Object.<anonymous> (http://localhost:8080/app.js:1795:1) 
    at __webpack_require__ (http://localhost:8080/app.js:660:30) 
    at fn (http://localhost:8080/app.js:86:20) 
    at eval (webpack-internal:///239:8:3) 
    at Object.<anonymous> (http://localhost:8080/app.js:2239:1) 
WorkboxError @ workbox-sw.prod.v2.1.1.mjs?efda:155 
(anonymous) @ workbox-sw.prod.v2.1.1.mjs?efda:175 
(anonymous) @ app.js:2361 
__webpack_require__ @ app.js:660 
fn @ app.js:86 
(anonymous) @ 173:3 
(anonymous) @ app.js:1795 
__webpack_require__ @ app.js:660 
fn @ app.js:86 
(anonymous) @ HomeView.vue?afbe:8 
(anonymous) @ app.js:2239 
__webpack_require__ @ app.js:660 
fn @ app.js:86 
(anonymous) @ index.js?3672:1 
(anonymous) @ app.js:1809 
__webpack_require__ @ app.js:660 
fn @ app.js:86 
(anonymous) @ main.js?1c90:1 
(anonymous) @ app.js:1616 
__webpack_require__ @ app.js:660 
fn @ app.js:86 
(anonymous) @ app.js:2368 
__webpack_require__ @ app.js:660 
(anonymous) @ app.js:709 
(anonymous) @ app.js:712 

Answer 1

あなたが見ている特定のエラー、not-in-swは、ServiceWorkerGlobalScopeの外側からworkbox-swライブラリで公開コードを使用するためです。たとえば、サービスワーカーコードをページに<script>としてインポートする場合や、ウェブワーカーとしてインポートする場合などです。

私が指摘してもいいリソースは、新しい「Get Started With Workbox For Webpack」ガイドです。