“Uncaught SyntaxError：导入未找到：默认”在一个模块中有效，但在另一个模块中无效

Question

我有两个 javascript 文件，它们都在同一个网页中使用，并且都使用第三个 javascript 文件的资源。

主 JS 文件 Person6.js，位于网络服务器上的 /FamilyTree/Person6.js ：

import HTTP from "../jscripts6/js20/http.js";
import {iframe, actMouseOverHelp, openFrame, openSignon, debug, args,
        getOffsetLeft, getOffsetTop, popupAlert, show,
        showHelp, hideHelp, helpElt, keyDown,
        eltMouseOver, eltMouseOut}
            from "../jscripts6/util.js";
import {capitalize} from "../jscripts6/CommonForm.js";
import Cookie from "../jscripts6/Cookie.js";

和 CommonForm.js，位于 Web 服务器上的 /jscripts6/CommonForm.js，您会看到它有一个由主脚本导入的方法。

import HTTP from "../jscripts6/js20/http.js";
import {getOffsetLeft, getOffsetTop, popupAlert, 
        helpDiv, eltMouseOver, eltMouseOut, displayHelp}
            from "../jscripts6/util.js";

当我单独对每个文件运行 eslint 时，除了在通过标签合并到应用程序中的脚本中声明的未定义资源之外，没有报告任何问题：

    <script src="/jscripts/tinymce/js/tinymce/tinymce.js" type="application/javascript">
    </script>
    <script src="/FamilyTree/Person6.js" type="module">
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?v=3.43&callback=initializeMaps&region=$GOOGLECC&key=$GOOGLEKEY" type="application/javascript"></script>

我收到错误：

Uncaught SyntaxError: import not found: default CommonForm.js:157:7.

第157行是从“../jscripts6/js20/http.js”导入HTTP；如上图所示。

为什么这个语句嵌入到 CommonForm.js 中是语法错误，而嵌入到主文件 Person6.js 中却不是语法错误？两个文件中的导入前面除了注释之外没有任何内容。显然，由于导入文件中存在此错误，主文件永远不会被执行。我在导入后发出了警报，但它没有弹出。

我正在尝试将我的代码从 ES3 迁移到 ES6。我该如何修复这个错误？

Answer 1

import HTTP from "../jscripts6/js20/http.js";

相当于

import { default as HTTP } from "../jscripts6/js20/http.js";

和你的错误

import not found: default

就是说http.js没有default出口。从您发布的片段来看，情况确实如此。

export var HTTP; 
if (HTTP && (typeof HTTP != "object" || HTTP.NAME)) 
  throw new Error("Namespace 'HTTP' already exists"); // Create our namespace, and specify some meta-information 
window.HTTP = HTTP = {};

没有默认导出，但有一个HTTP导出，为了让您的代码按原样工作，您需要执行以下操作

import { HTTP as HTTP } from "../jscripts6/js20/http.js";
// or shortened
import { HTTP } from "../jscripts6/js20/http.js";

还值得注意的是

if (HTTP && (typeof HTTP != "object" || HTTP.NAME)) 

在这种情况下，永远不会评估true并且永远不会抛出，因为您undefined通过在声明中不提供值来明确声明它export var HTTP;。