Question

我遇到了问题，将模块导入到我的index.js文件中。当我开始调试时，我总是收到错误“未捕获的SyntaxError：意外的标识符”

我的index.html文件：

.
.
.
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>    
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/defines.js"></script>
<script type="text/javascript" src="js/jgestures.js"></script>
<script type="text/javascript" src="js/mdb.js"></script>
<script type="module" src="index.js"></script>
<script type="module" src="js/global.js"></script>
</html>

我要导入“ modals.js”的模块：

class Modals{
  let b = 0;
}
export {Modals};

我的index.js文件的第一行（发生错误的地方）：

import {Modals} from './modals.js'

有人知道我的代码有什么问题吗？

Answer 1

好像您没有正确使用ES6类。另外，请记住，并非所有浏览器都可与ES6一起使用，最好使用功能或类似Babel的编译器。

我建议reviewing the docs进行复习，但这是您的示例与ES6类一起工作所需要执行的代码片段

您的modals.js文件将变为：

class Modals{
  constructor (b) {
    this.b = b;
  }
}
export {Modals};

您的index.js：

import {Modals} from './modals.js';

let m = new Modals('something')
console.log('m', m)

您的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="module" src="index.js"></script>
</body>
</html>

祝你好运！

Answer 2

我建议首先检查浏览器支持。 ES6模块 已经存在了一段时间，但是您的浏览器版本可能不支持此语法。

然后，您需要像 Babel 这样的编译器才能使用这种类型的语句。

无法导入ES6模块

2 个答案: