Как я могу импортировать функции из другого файла javascript?

Question

Я довольно новичок в JS, и у меня есть некоторые проблемы с импортом.

Я делаю приложение со списком планет Звездных войн, где я хотел бы импортировать функции из другого файла JS, такого какэто:

--- dataManager.js ---

export function getAllPlanetDataFromAPI() {

    let allPlanetsInfo = new XMLHttpRequest();
    allPlanetsInfo.open('GET', 'https://swapi.co/api/planets');
    allPlanetsInfo.onload = function () {
        console.log(allPlanetsInfo.responseText)
    };
    allPlanetsInfo.send();

}

--- main.js ---

import { getAllPlanetDataFromAPI } from './dataManager';

getAllPlanetDataFromAPI();

Полученное сообщение об ошибке:: "Uncaught SyntaxError: Неожиданный токен {"

Похоже, синтаксис неправильный, но я уже проверил все статьи об "импорте" в Интернете и не смог найти, что я делаю неправильно.

Answer 1

Хорошо, так что я понял!

Основная проблема заключалась в том, что я не добавил атрибут "type =" module "" в мой файл main.js в моем HTML. После этого я получил другую ошибку: «404 - Not Found», и я мог исправить ее, добавив «.js» после импорта. Итак, идеально работающий код:

--- index.html ---

<script src="../static/js/main.js" type="module"></script>
<script src="../static/js/dataManager.js" type="module"></script>

--- dataManager.js ---

export function getAllPlanetDataFromAPI() {

    let allPlanetsInfo = new XMLHttpRequest();
    allPlanetsInfo.open('GET', 'https://swapi.co/api/planets');
    allPlanetsInfo.onload = function () {
        console.log(allPlanetsInfo.responseText);
    };
    allPlanetsInfo.send();

}

--- main.js ---

import { getAllPlanetDataFromAPI } from './dataManager.js';

getAllPlanetDataFromAPI();

Спасибо за все ответы и комментарии, особенно @yaswanth, который подтолкнул меня к поиску решения!

Answer 2

Вы должны изменить свои расширения файлов на .mjs
затем запустите ваш код с помощью этой команды:

узел --experimental-modules main.mjs

Пожалуйста, не стесняйтесь спрашивать меня в комментариях.

Answer 3

в es6 вы можете использовать import {getAllPlanetDataFromAPI} из './dataManager', в противном случае вам следует импортировать ./dataManage