gpt4 book ai didi

javascript - 如何在 Vanilla JavaScript (JS) 中导入/导出类

转载 作者:太空狗 更新时间:2023-10-29 13:47:13 29 4
gpt4 key购买 nike

我正在使用 Vanilla JavaScript (JS) 并尝试利用作为 ECMA-2015 一部分的导入/导出模块 的概念(ECMA- 6) 发布。

请看下面的代码片段:

矩形.js:

export default class  Rectangle{
constructor(height, width) {
this.height = height;
this.width = width;
}
}

myHifiRectangle.js:

import Rectangle from 'rectangle.js';

class MyHiFiRectangle extends Rectangle {
constructor(height, width) {
super(height,width);
this.foo= "bar";
}
}

我正在尝试在 HTML 页面 test.html 中使用上述 JS 文件,如下所示:

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Javascipt by Rasik Bihari Tiwari</title>
<script src="Scripts/rectangle.js"></script>
<script src="Scripts/myHiFiRectangle.js"></script>
<script type="text/javascript">

var v = new MyHiFiRectangle(2,4);
console.debug(v.foo);
</script>
</head>
<body >

</body>

</html>

然后,我尝试在浏览器中浏览 test.html 文件。浏览结果如下:

在谷歌浏览器上我得到以下错误:

Uncaught SyntaxError: Unexpected token export

在 Mozilla firefox 上我得到以下错误:

SyntaxError: export declarations may only appear at top level of amodule

SyntaxError: import declarations may only appear at top levelof a module

ReferenceError: MyHiFiRectangle is not defined[Learn More]

我尝试重新排序在 HTML 文件的 head 标记中引用的 JS 文件,但没有任何影响。

P.S. 我没有使用任何像 Babel 这样的转译器。我正在尝试检查 Vanilla JS 中导出/导入 classmodule 构造的 native 支持及其工作原理。

最佳答案

我经历了这个,我有一个解决方案,将第三个 js 文件作为模块。rectangle.js 将相同,myHifiRectangle.js 文件只有一处修改。

import Rectangle from './rectangle.js';

export default class MyHiFiRectangle extends Rectangle {
constructor(height, width) {
super(height,width);
this.foo= "bar";
}
}

现在,我们需要第三个文件,它将是一个模块文件,比方说,script.js

import MyHiFiRectangle from './myHifiRectangle.js'

var v = new MyHiFiRectangle(2,4);
console.log(v.foo);

现在,第三个文件 script.js 应该成为一个模块。有关模块的更多信息 here .我将所有三个文件都放在 modelJS 文件夹下。

<script type="module" src="/modelJS/script.js"></script>

现在,当您运行时,您应该会看到在开发人员工具的控制台选项卡中打印“bar”。

关于javascript - 如何在 Vanilla JavaScript (JS) 中导入/导出类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44490627/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com