RBT*_*RBT 9 html javascript ecmascript-6
我正在使用普通的javascript并试图利用作为ECMA-6版本的一部分的类和模块导入/导出的概念.
这是我的代码:
rectangle.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网页中使用上述两个*.js文件,test.html如下所示:
<!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在各种浏览器中浏览文件时,在Google Chrome上我得到以下错误:
未捕获的SyntaxError:意外的令牌导出
在Mozilla Firefox上我得到以下错误:
SyntaxError:export声明只能出现在模块的顶层
SyntaxError:import声明只能出现在模块的顶层
ReferenceError:未定义MyHiFiRectangle [了解详情]
我尝试重新排序HTML文件的head标签中引用的*.js文件,但它们没有区别.
PS我没有使用像Babel这样的任何转发器.我只是想在javascript中看到'class'和模块导出/导入构造(ECMA-6发布)的原生支持以及它是如何工作的.
我经历了这个，我有一个解决方案，将第三个js文件作为模块。rectangular.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设为一个模块。更多关于模块的信息。我在modelJS文件夹下有所有三个文件。
<script type="module" src="/modelJS/script.js"></script>
现在，当您运行时，您应该在控制台中看到“ bar”。
在从curiou.netter 在此线程中的答案中得到提示后，我还添加了一个答案。
我将在原始代码文件中以精确的顺序指出错误。顺便说一句，我能够在不涉及额外script.js文件的情况下解决该问题：
当引用JS模块时，脚本类型应该是模块。我指的是myHiFiRectancle.js就像使用src标签的常规 JS 文件一样：
src="Scripts/myHiFiRectangle.js"
我还导入了MyHiFiRectangle模块。以下是修复此错误后head标记在test.html文件中的外观：
<head>
<meta charset = "UTF-8">
<title>Javascipt by Rasik Bihari Tiwari</title>
<script type="module">
import MyHiFiRectangle from './scripts/myHiFirectangle.js';
var v = new MyHiFiRectangle(2,4);
console.debug(v.foo);
</script>
</head>
myHiFiRectangle.js文件中缺少导出默认语句。当每个类必须从不同的地方使用时，必须将其导出为模块。纠正后的myHiFiRectangle.js文件如下所示：
import Rectangle from './rectangle.js';
export default class MyHiFiRectangle extends Rectangle {
constructor(height, width) {
super(height,width);
this.foo= "bar";
}
}
我的脚本文件在导入模块时出现了另一个错误。
不正确的方法：
import Rectangle from 'rectangle.js';
import MyHiFiRectangle from '/scripts/myHiFirectangle.js';
它会导致以下错误，这是不言自明的：
未捕获的类型错误：无法解析模块说明符“rectangle.js”。相对引用必须以“/”、“./”或“../”开头。
正确方法：
import Rectangle from './rectangle.js';
import MyHiFiRectangle from './scripts/myHiFirectangle.js';
| 归档时间： |
|
| 查看次数： |
7000 次 |
| 最近记录： |