在“public”文件夹和“src”文件夹之间共享功能 - React 应用程序

Question

我在创建 react pwa 应用程序时遇到问题...

确实，在使用以下命令“create-react-app”设置我的反应项目并添加我的正确文件后，我具有以下项目结构。

my-app
  - README.md
  - package.json
  - .gitignore
  - node_modules
  - public
    - favicon.icon
    - index.html
    - manifest.json
    - sw.js
  - src
    - App.css
    - App.js
    - index.css
    - index.js
    - registerServiceWorker.js
    - indexedDB
      - database.js
      - idb.js
    - components
      - home-page
        - HomePage.js
        - homePage.css
      - auth-page
        - AuthPage.js
        - authPage.css
    - services
      - AuthService.js
      - UserService.js
    - global
      - Global.js

我从已注册的ServiceWorker.js 注册了一个名为“sw.js”的服务工作者。以下文件被放置到公用文件夹中。

问题是：我在 src 文件夹内的“AuthService.js”文件中开发了一些函数，我需要将这些函数放入我的公共“sw.js”文件中，该文件位于我的公共文件中文件夹。

问题是：我该怎么做？我尝试了几次导入/需要 AuthService.js 文件，但反应告诉我 Uncaught SyntaxError: Unexpected token *

看看我的 sw.js

//import * as idb from './src/global/Global.js' // <-- BUG HERE CANNOT IMPORT THE FILE
//import * as idb from './src/services/AuthService.js' // <-- BUG HERE CANNOT IMPORT THE FILE
//import * as idb from './src/indexedDB/database.js'; // <-- BUG HERE CANNOT IMPORT THE FILE


// I would like to get BASE_URL_BACKEND from my src/global/Global.js
// but I can't because I can't import/require anything on sw.js,
// so I hardcoded it...
const BASE_URL_BACKEND = 'http://192.168.1.43:8080';

const cacheName ='emmergency-1.0';

self.addEventListener('install', evt => {
    console.log(`SW installé à ${new Date().toLocaleTimeString()}`);

    let cachePromise = caches.open(cacheName).then(cache =>{
        return cache.addAll([
            '/'
        ])
        .then(console.log("Cache initialisé"))
        .catch(console.err);
    });

    evt.waitUntil(cachePromise);
});


// Others function here but nothing interesting to understand the problem.
// (... Others functions heres ...)
// Others function here but nothing interesting to understand the problem.



self.addEventListener('sync', event => {
    if(event.tag === 'sync-emergencies'){
        console.log('Attemting to sync', event.tag);

        event.waitUntil(
            getAllEmergency().then(emergencies => {
                const unsynced = emergencies.filter(emergency => emergency.unsynced);

                console.log("UNSYNCED =", unsynced);

                return Promise.all(unsynced.map(emergency => {
                    fetch(`${BASE_URL_BACKEND}/api/calls`, {
                        headers : {
                            'Accept': 'application/json',
                            'Content-Type' : 'application/json',
                            // MUST HAVE HERE THE AUTHORIZATION TOKEN 
                            // STORED INSIDE AuthService.js, BUT I CAN'T
                            // BECAUSE OF THE IMPOSSIBILITY TO IMPORT / REQUIRE FILES
                        },
                        method: 'POST',
                        body: JSON.stringify(emergency)
                    })
                    .then(() => {

                        // I need "putEmergency" function which is coded inside database.js, but I can't due to the impossibility to import / require external file...
                        //return putEmergency(Object.assign({}, emergency, { unsynced: false}), emergency.id);
                    })
                    .catch( (error) => {
                      console.log('Erreur lors du push :', error)
                    });
                }))
            })
        )
    }
});

请有人帮忙，建议和回答。我被困在这里 3 天了...谢谢。

Answer 1

如果你想像这样使用导入，你必须在你的 webpack 配置中添加一个用于构建你的 serviceworker 的条目。

如果你的文件是构建后可用的纯 js，你可以使用importScripts

编辑以回顾评论部分：

create-react-app 使用 webpack，但它是隐藏的。要访问 webpack 配置文件，您必须运行 npm run eject。

完成此操作后，您必须修改 webpacks 配置文件以向您的服务工作者添加一个条目，如下所示。

entry: { sw: paths.appServiceWorker, main: [require.resolve('./polyfills'), paths.appIndexJs] }

构建项目后，这将在 static/js 文件夹中生成一个新文件。这就是您要注册为服务人员的内容。