javascript - 在 "public"文件夹和 "src"文件夹之间共享函数 - React 应用程序

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”的 Service Worker。以下文件被放置到公共(public)文件夹中。

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

问题是:我该怎么做？我尝试了几次导入/需要 AuthService.js 文件，但 react 告诉我未捕获的语法错误:意外的标记*

看看我的 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)
                    });
                }))
            })
        )
    }
});

有人可以帮忙、建议和回答吗？我已经被困在这里三天了...谢谢。

Answer 1

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

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

编辑以回顾评论部分:

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

完成此操作后，您必须修改 webpacks 配置文件以向 Service Worker 添加条目，如下所示。

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

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