Question

“导入”意外令牌？（chrome 62）

2017-11-08

13020

javascript google-chrome

在尝试排除 systemjs 找不到我安装的自定义库的原因（可能是后续问题）时，我在尝试“手动”执行操作时遇到了问题。

因此，我有一个简单的系统，它由 3 个文件组成：

index.html
hi.js
hi2.js

索引只是：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
</head>

<body>
<script src="hi.js"></script>
</body>
</html>

hi.js：

import * as hi from "hi2.js";

hi.myFunction();

hi2.js：

function myFunction() {
  alert('hi')
}
export { myFunction };

现在，当我运行（使用 webstorm 和 chrome 62）上述代码时，我收到（chrome）调试器报告的以下错误： “未捕获的语法错误：意外的令牌导入”

这里发生了什么？我检查了 mdn 上的 javascript 兼容性，它告诉我 chrome 61 及更新版本支持导入。- 我使用 chrome 62 进行测试。

那么发生了什么，如何让它工作？

根据建议，我还将 html 行更改为 <script type="module" src="hi.js"></script> 。这根本没有帮助，同样的错误。

Answer 1

您说得对，脚本标记中需要 type="module" ：

<script src="hi.js" type="module"></script>
<!-- ---------------^^^^^^^^^^^^^       -->

模块说明符中还需要 ./ 前缀：

import * as hi from "./hi2.js";
// ------------------^^

这是为了让没有路径的说明符在事物发展的某个阶段具有特殊含义。摘自 WHAT-WG 规范：

This restriction (that a relative URL specifier must start with / , ./ , or ../ – T.J.) is in place so that in the future we can allow custom module loaders to give special meaning to "bare" import specifiers, like import "jquery" or import "web/crypto" . For now any such imports will fail, instead of being treated as relative URLs.

当我使用未设置实验性标志的 Chrome 62 对您的文件进行这两项更改时，我收到了警报。