Можно ли использовать скрипт как модуль и как отдельный исполняемый файл?

Question

Емельян

javascript , расширения-для-браузеров

Можно ли использовать скрипт как модуль и как отдельный исполняемый файл?

Как можно использовать функции из файла `requests.js` на веб-странице, если в service worker они импортируются как модуль? Как настроить использование этих запросов и на content page в файле `main.js`?

20 июня 2024 г. 14:11

Ответы на вопрос 2

Похожие вопросы

Answer 1

Да, скрипт можно использовать как модуль и как отдельный исполняемый файл.

Для использования функций из файла `requests.js` на веб-странице, который импортируется как модуль в service worker, можно использовать функцию `import` в файле `main.js`.

Пример:

В файле `requests.js`:
```javascript
export function fetchData(url) {
   return fetch(url)
      .then(response => response.json())
      .catch(error => console.error(error));
}
```

В файле `main.js`:
```javascript
import { fetchData } from './requests.js';

const url = 'https://api.example.com/data';
fetchData(url)
   .then(data => {
      console.log(data);
   });
```

Таким образом, функция `fetchData` из файла `requests.js` будет доступна на веб-странице через модульный импорт в файле `main.js`.

Answer 2

Не уверен, но может быть так: 
 // requests.js
(function(global) {
    function RequestToSite() {
        return fetch('https://somesite.com').then(function(data) {
            return data.json();
        });
    }

    if (typeof module !== 'undefined' && module.exports) {
        module.exports = {
            RequestToSite
        };
    } else {
        global.RequestToSite = RequestToSite;
    }
})(this);
 
 
 // background.js - service_worker
import { RequestToSite } from './requests.js';

async function someFunction() {
    let data = await RequestToSite();
    return data;
}
 
 
 <!-- index.html - content page -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script type="text/javascript" src="./requests.js"></script>
    <script type="text/javascript" src="./main.js"></script>
</head>
<body>
    <!-- Content of the page -->
</body>
</html>
 
 
 // main.js
async function getSomeData() {
    let data = await RequestToSite();
    console.log(data);
}

// Вызов функции для проверки
getSomeData();