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();

我收到的错误消息是：“未捕获的SyntaxError：意外的令牌{”

似乎语法不正确，但是我已经检查了网络上的所有“导入”文章，找不到我在做什么错了。

Answer 1

在es6中，您可以从'./dataManager'使用import {getAllPlanetDataFromAPI}，否则您应该导入./dataManage

Answer 2

好的，所以我知道了！

主要问题是我尚未在HTML的main.js文件中添加“ type =“ module”“属性。之后，我又遇到另一个错误：“ 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 3

您应该将文件扩展名更改为 .mjs
然后使用以下命令运行代码：

node --experimental-modules main.mjs

请随时在评论中问我。

如何从其他JavaScript文件导入函数？

3 个答案: