在“公共”文件夾和“ src”文件夾之間共享功能-React app

Question

創建React PWA應用程序時遇到問題...

確實，在使用以下命令“ create-react-app”設置我的react項目並添加我的適當文件后，我具有以下項目結構。

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

我從registeredServiceWorker.js注冊了名為“ sw.js”的服務工作者。 以下文件放置在公用文件夾中。

問題是：我已經在src文件夾中的“ AuthService.js”文件中開發了一些函數，並且需要將這些函數放入我的公共文件夾中的公共“ sw.js”文件中。

問題是：我該怎么辦？ 我試過幾次導入/需要AuthService.js文件，但反應告訴我Uncaught SyntaxError：意外令牌*

看看我的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

如果要使用import，則必須在webpack配置中添加一個用於構建Serviceworker的條目。

如果您的文件在構建后是純js可用的，則可以使用importScripts

編輯以重述評論部分：

create-react-app使用webpack，但是它是隱藏的。 要訪問webpack配置文件，必須運行npm run eject exit。

完成此操作后，您將必須修改webpacks配置文件，以將條目添加到服務工作者，如下所示。

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

構建項目后，這將在static / js文件夾中生成一個新文件。 這就是您要注冊為服務人員的身份。