JavaScript ||将 API 与 ES6 模块结合使用

Question

我目前正在练习在 JS (vanilla) 中使用 API 和 es6 模块。

app.js

import Game from './model/Game';

const proxy = 'https://cors-anywhere.herokuapp.com/';
let key = 'MY_API_KEY_PRIVATE'; //kept private for StackOverflow
let steamID = '76561197996900532';

getOwnedGames();

async function getOwnedGames() {

    try {

        const result = await fetch(`${proxy}http://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/?key=${key}&steamid=${steamID}&format=json&include_appinfo=true`);

        const data = await result.json();
        let gamesList = data.response.games;

        console.log(gamesList);

    } catch(error) {

        console.error(error);
    }

}

.

Game.js

export class Game {


}

现在，无需使用 import GotGames from './model/Game'; 即可正常工作，但会出现以下错误:

Uncaught SyntaxError: Cannot use import statement outside a module

通过在 HTML 的脚本标记中添加 type="module"，我在这个空间中看到了类似的问题，但这会出现以下错误:

Access to script at 'my_file_path' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

为什么添加 type="module"会影响我的 API 调用？如何做到这一点？这是否与要求 Node.js 安装 webpack 有关？

Answer 1

您的问题实际上是一个非常广泛的问题，但我会尽力澄清其中的一些重要方面。

-剧透开始-

网络包。

-剧透结束-

请考虑到，即使它因不适合初学者而闻名，有些人仍将它与 Babel 和 React 一起视为 Web 开发技术的前沿。所以至少值得研究一次。简而言之，它将把您的 ES 模块转换为自定义系统(用普通的旧式 JavaScript 编写)，该系统在技术上与所有浏览器兼容，并保留功能以及许多其他优点。

但是，为了简单起见，您可能想要使用像 React 这样的框架，它在底层使用 Webpack，因此您不必直接处理它。

真心推荐你this Medium article发现有关 JavaScript 和 NodeJS 模块历史的一些有趣事实。

最后，我们都同意 ES6 模块是 future ，但是，即使在解决了您的具体问题之后，您也会遗憾地发现 ES6 模块是一个非常新的标准，并且目前浏览器的支持相对较差。

回答您的问题:

默认情况下，浏览器不会将 JavasScript 文件解释为模块，因此您必须使用 type="module" 显式声明它们。脚本标签中的属性。这显然就是您遇到第一个错误的原因。

要正确导入“Game.js”模块，您必须重写导入语句，如下所示:import {Game} from './model/Game';因为您进行了命名导出。正如评论中所写，在 MDN 上阅读有关导入/导出的内容，您会更清楚。

最后，CORS 错误可能是由服务器配置错误引起的。特别是带有标题。您可能想尝试设置 Access-Control-Allow-Origin标题为 *或您的特定服务器名称，因此新请求将具有 Origin header 与 null 不同.

我希望这能为您指明一条扩展知识的好途径。

* 编辑:要解决单击打开文件时有关错误的注释中的问题，我建议使用以下不为人知的元标记 <meta http-equiv="Access-Control-Allow-Origin" content="*">当没有服务器时模拟http header。我不确定它是否有效，但从技术上讲应该可行，请在评论中告诉我，因为我很好奇。

参见this