javascript - Service Worker 文件找不到导入的文件
问题描述
对于我正在研究的这个服务人员,我已经设法让它工作,但现在正在寻求扩展它。这个想法是根据它是英国版还是美国版的网站,使用单独的模拟数据。
原来是这样操作的
测试模式.ts:
class TestMode {
constructor() {
if (!this.isEnabled()) {
return;
}
if (!('serviceWorker' in navigator)) {
// eslint-disable-next-line no-console
console.log('Browser does not support service workers');
return;
}
this.init();
}
private init(): void {
navigator.serviceWorker
.register('worker.min.js')
.then(this.handleRegistration)
.catch((error) => {
throw new Error('Service Worker registration failed: ' + error.message);
});
}
private handleRegistration(registration: ServiceWorkerRegistration): void {
registration.update();
// eslint-disable-next-line no-console
console.log('Registration successful, scope is:', registration.scope);
}
private isEnabled(): boolean {
return locationService.hasParam('testMode');
}
}
export default new TestMode();
serviceWorker.ts:
// eslint-disable-next-line spaced-comment
/// <reference lib="WebWorker" />
// export empty type because of tsc --isolatedModules flag
export type {};
declare const self: ServiceWorkerGlobalScope;
const CACHE_NAME = 'mockData-cache';
const MOCK_DATA_RECORD: Record<string, string> = {
'/units/all?availability=Active&roomTypeHandle=kitchens': 'mock-data/unitData.json',
'/frontal-ranges/kitchens?': 'mock-data/kitchensData.json',
'/carcase-ranges/?availability=Active&roomTypeHandle=kitchens': 'mock-data/carcaseRangesData.json',
'/products/830368/related?roomTypeHandle=kitchens&productStateHandle=Active&limit=1000&campaignPhaseId=183&retailStore=Finishing%20Touches%20%28Extra%29': 'mock-data/relatedItems.json',
'/carcase-placeholders?productStateHandle=Active&carcaseRangeHandle=Feature%20Bianco%20Grain&limit=1000&roomTypeId=1': 'mock-data/carcasePlaceholdersBiancoData.json',
'/frontal-placeholders?productStateHandle=Active&frontalRangeHandle=Infinity%20Plus%20Milano-Ultra%20Bianco%20Gloss&limit=1000&roomTypeId=1': 'mock-data/frontalPlaceholdersActive.json',
'/frontal-placeholders?productStateHandle%5B0%5D=Active&productStateHandle%5B1%5D=SemiRetired&frontalRangeHandle=Infinity%20Plus%20Milano-Ultra%20Bianco%20Gloss&limit=1000&roomTypeId=1':
'mock-data/frontalPlaceholdersSemiRetired.json',
'/carcase-placeholders?productStateHandle=Active&carcaseRangeHandle=Infinity%20Plus%20Milano%20White%20Edged&limit=1000&roomTypeId=1': 'mock-data/carcasePlaceholdersActive.json',
'/api/json/unit-range-definitions?frontalRangeHandle=Infinity%20Plus%20Milano-Ultra%20Bianco%20Gloss&carcaseRangeHandle=Infinity%20Plus%20Milano%20White%20Edged&drawerBoxRangeHandle=Infinity%20Plus%20Glass%20Drawer%20Box&unitTypes=Base&orderPromotionId=183&roomTypeHandle=kitchens':
'mock-data/unitRangeBase.json',
'/api/json/unit-range-definitions?frontalRangeHandle=Infinity%20Plus%20Milano-Ultra%20Bianco%20Gloss&carcaseRangeHandle=Infinity%20Plus%20Milano%20White%20Edged&drawerBoxRangeHandle=Infinity%20Plus%20Glass%20Drawer%20Box&unitTypes=Wall&orderPromotionId=183&roomTypeHandle=kitchens':
'mock-data/unitRangeWall.json',
'/api/json/unit-range-definitions?frontalRangeHandle=Infinity%20Plus%20Milano-Ultra%20Bianco%20Gloss&carcaseRangeHandle=Infinity%20Plus%20Milano%20White%20Edged&drawerBoxRangeHandle=Infinity%20Plus%20Glass%20Drawer%20Box&unitTypes=Tower&orderPromotionId=183&roomTypeHandle=kitchens':
'mock-data/unitRangeTower.json',
'/api/json/unit-range-definitions?frontalRangeHandle=Infinity%20Plus%20Milano-Ultra%20Bianco%20Gloss&carcaseRangeHandle=Infinity%20Plus%20Milano%20White%20Edged&drawerBoxRangeHandle=Infinity%20Plus%20Glass%20Drawer%20Box&unitTypes=Island&orderPromotionId=183&roomTypeHandle=kitchens':
'mock-data/unitRangeIsland.json',
'/api/json/feature-unit-range-definitions?frontalRangeHandle=Infinity%20Plus%20Milano-Ultra%20Bianco%20Gloss&carcaseRangeHandle=Infinity%20Plus%20Milano%20White%20Edged&drawerBoxRangeHandle=Infinity%20Plus%20Glass%20Drawer%20Box&unitTypes=Base&orderPromotionId=183&roomTypeHandle=kitchens':
'mock-data/featureUnitRangeBase.json',
'/api/json/feature-unit-range-definitions?frontalRangeHandle=Infinity%20Plus%20Milano-Ultra%20Bianco%20Gloss&carcaseRangeHandle=Infinity%20Plus%20Milano%20White%20Edged&drawerBoxRangeHandle=Infinity%20Plus%20Glass%20Drawer%20Box&unitTypes=Wall&orderPromotionId=183&roomTypeHandle=kitchens':
'mock-data/featureUnitRangeWall.json',
'/api/json/feature-unit-range-definitions?frontalRangeHandle=Infinity%20Plus%20Milano-Ultra%20Bianco%20Gloss&carcaseRangeHandle=Infinity%20Plus%20Milano%20White%20Edged&drawerBoxRangeHandle=Infinity%20Plus%20Glass%20Drawer%20Box&unitTypes=Island&orderPromotionId=183&roomTypeHandle=kitchens':
'mock-data/featureUnitRangeIsland.json',
'/products?roomTypeHandle=kitchens&productStateHandle=Active&limit=1&campaignPhaseId=183&retailCategory.handle=Worktops&attributes.Worktop%20Type=Worktop%2CBreakfast%20Bar&selectedCollection=Infinity%20Plus%20Milano&retailSubCategory.handle=Timber&productMaterial.name=Timber':
'mock-data/productsWorktopsTimber.json',
'/products?roomTypeHandle=kitchens&productStateHandle=Active&limit=1&campaignPhaseId=183&retailCategory.handle=Worktops&attributes.Worktop%20Type=Worktop%2CBreakfast%20Bar&selectedCollection=Infinity%20Plus%20Milano&retailSubCategory.handle=Bespoke&productMaterial.name=Luxury%20Laminate':
'mock-data/productsWorktopsLuxuryLaminate.json',
'/products?roomTypeHandle=kitchens&productStateHandle=Active&limit=1&campaignPhaseId=183&retailCategory.handle=Worktops&attributes.Worktop%20Type=Worktop%2CBreakfast%20Bar&selectedCollection=Infinity%20Plus%20Milano&retailSubCategory.handle=Laminate&productMaterial.name=Laminate':
'mock-data/productsWorktopsLaminate.json',
'/products?roomTypeHandle=kitchens&productStateHandle=Active&limit=1&campaignPhaseId=183&retailCategory.handle=Worktops&attributes.Worktop%20Type=Worktop%2CBreakfast%20Bar&selectedCollection=Infinity%20Plus%20Milano&retailSubCategory.handle=K-Life&productMaterial.name=K-Life':
'mock-data/productsWorktopsKLife.json',
'/products?roomTypeHandle=kitchens&productStateHandle=Active&limit=1&campaignPhaseId=183&retailCategory.handle=Worktops&attributes.Worktop%20Type=Worktop%2CBreakfast%20Bar&selectedCollection=Infinity%20Plus%20Milano&retailSubCategory.handle=Bespoke&productMaterial.name=Luxury%20Bespoke':
'mock-data/productsWorktopsLuxuryBespoke.json',
'/products?roomTypeHandle=kitchens&productStateHandle=Active&limit=1&campaignPhaseId=183&retailCategory.handle=Worktops&attributes.Worktop%20Type=Worktop%2CBreakfast%20Bar&selectedCollection=Infinity%20Plus%20Milano&retailSubCategory.handle=Bespoke&productMaterial.name=Rhino%20Edge':
'mock-data/productsWorktopsRhinoEdge.json',
'/products?roomTypeHandle=kitchens&productStateHandle=Active&limit=1000&campaignPhaseId=183&productId%5B0%5D=1003558&productId%5B1%5D=1003544': 'mock-data/productsProductID1003544.json',
'/products?roomTypeHandle=kitchens&productStateHandle%5B0%5D=Active&productStateHandle%5B1%5D=Inactive&productStateHandle%5B2%5D=EndOfLife&productStateHandle%5B3%5D=Dead&limit=1000&campaignPhaseId=183&retailSubCategory.handle%5B0%5D=MilanoProfiles&retailSubCategory.handle%5B1%5D=BaseTopProfile':
'mock-data/productsBaseTopProfile.json',
'/products?roomTypeHandle=kitchens&productStateHandle=Active&limit=1&campaignPhaseId=183&retailCategory.handle=Worktops&attributes.Worktop%20Type=Worktop%2CBreakfast%20Bar&productMaterial.name=Luxury%20Laminate&selectedCollection=Infinity%20Plus%20Milano&groupBy=plannerColour.name':
'mock-data/productsWorktopsLuxuryLaminatePlannerColour.json',
'/products?roomTypeHandle=kitchens&productStateHandle=Active&limit=1&campaignPhaseId=183&retailCategory.handle=Worktops&productMaterial.name=Luxury%20Laminate&plannerColour.name=Aleve&groupBy=edgeColour.name&selectedCollection=Infinity%20Plus%20Milano':
'mock-data/productsWorktopsLuxuryLaminatePlannerColourAleve.json',
'/products?roomTypeHandle=kitchens&productStateHandle=Active&limit=1000&campaignPhaseId=183&retailCategory.handle=Lighting': 'mock-data/productsLighting.json',
'/products?roomTypeHandle=kitchens&productStateHandle=Active&limit=1000&campaignPhaseId=183&productId%5B0%5D=830368': 'mock-data/productsActiveProductID830368.json',
'/products?productId=830368&campaignPhaseId=183&roomTypeHandle=kitchens': 'mock-data/productsProductID830368.json',
'/products?roomTypeHandle=kitchens&productStateHandle=Active&limit=1000&campaignPhaseId=183&retailCategory.handle=MilanoProfiles&productColour.name=Camel':
'mock-data/productsCamel.json',
'/products/830368/related?roomTypeHandle=kitchens&productStateHandle=Active&limit=1000&campaignPhaseId=183&selectedCollection=Infinity%20Plus%20Milano&retailStore=Finishing%20Touches%20%28Extra%29':
'mock-data/relatedItemsInfinityPlusMilano.json',
'/products?roomTypeHandle=kitchens&productStateHandle%5B0%5D=Active&productStateHandle%5B1%5D=SemiRetired&limit=1000&campaignPhaseId=183&productId%5B0%5D=830368':
'mock-data/productsSemiRetiredData.json',
};
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(Object.values(MOCK_DATA_RECORD));
}),
);
self.skipWaiting();
});
self.addEventListener('activate', function () {
return self.clients.claim();
});
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
const pathAndQuery = url.pathname + url.search;
if (pathAndQuery in MOCK_DATA_RECORD) {
const cacheKey = MOCK_DATA_RECORD[pathAndQuery];
event.respondWith(
caches.match(cacheKey, {
cacheName: CACHE_NAME,
}) as Promise<Response>,
);
}
});
现在为了对此进行扩展,我已将模拟数据移动到另一个名为 mockServiceWorker 的文件夹中,在 US 文件夹中还有另一个文件夹。这样做的想法是导入模拟数据的 GB 和 US 版本,然后通过检查,Service Worker 将确定它应该使用哪些数据。
目前我只是想导入 gb 数据并这样做:
import { MOCK_DATA } from './mockServiceWorker/mockData';
现在只是想通过这样做来查看它的工作原理:
console.log(MOCK_DATA);
但是虽然工作区中没有错误,但在终端中我得到:
Module not found: Error: Can't resolve './mockServiceWorker/mockData' in '/Users/lewis.ross/git/planner2d/core'
Webpack 也用于这个 service worker。设置站点时,会在 dist 文件夹中生成一个 worker.min.js 文件,并且在其中我也收到以下消息:
function webpackMissingModule() { var e = new Error("Cannot find module './mockServiceWorker/mockData
我不知道为什么它找不到文件。有没有其他人经历过这个并设法解决它?任何帮助将不胜感激
解决方案
以防其他人和我有同样的问题。检查你的 webpack 配置是如何设置的,我在服务工作者的配置中添加了一个单独的部分并忘记了广告:
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.hbs'],
modules: [
COUNTRY_CODE_PATH,
],
alias: ALIAS_MAIN,
},
添加后,我停止收到未找到模块的错误。
推荐阅读
- android - Android导航组件在使用安全参数时将包作为参数传递
- google-apps-script - 需要帮助,导出的 PDF 中未刷新电子表格公式
- file - 使用 VueJS 和 Axios 上传文件
- ruby-on-rails - 无法将数据保存到在 Ruby on Rails 中导入 CSV 文件的数据库
- android - Android - ImageView 的不同 scaleType 之间的共享元素转换未正确设置动画(使用 Glide)
- sql - 你如何测试如下的 PL/SQL 代码?
- java - JOOQ 处理嵌套列表 UPSERT
- java - 读者数量有限的读者 Writer java
- fastapi - FastAPI 上的事件处理程序
- android - 代号一:横向启动纵向应用和getDisplayWidth()