如何在vanilla JavaScript中导入/导出类 [英] How to do import/export a class in vanilla JavaScript
问题描述
我正在使用普通的javascript并尝试利用类和模块导入/导出的概念，这是ECMA-6发布的一部分。
I'm using plain javascript and trying to leverage the concept of class and module import/export which came as part of ECMA-6 release.
这是我的代码：
rectangle.js file -
rectangle.js file -
export default class Rectangle{
constructor(height, width) {
this.height = height;
this.width = width;
}
}
myHifiRectangle.js file -
myHifiRectangle.js file -
import Rectangle from 'rectangle.js';
class MyHiFiRectangle extends Rectangle {
constructor(height, width) {
super(height,width);
this.foo= "bar";
}
}
我正在尝试使用以上两种*。 js文件位于一个简单的HTML网页 test.html 中，如下所示：
I'm trying to use the above two *.js files in a simple HTML web page test.html as shown below:
<!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上我收到以下错误：
Now when I browse test.html file in various browsers, on Google chrome I get below error:
Uncaught SyntaxError：意外的令牌导出
Uncaught SyntaxError: Unexpected token export
在Mozilla Firefox上我得到以下错误：
On Mozilla firefox I get below error:
语法错误：导出声明可能只出现在
模块的顶层
SyntaxError: export declarations may only appear at top level of a module
语法错误：导入声明可能只出现顶级
模块
SyntaxError: import declarations may only appear at top level of a module
ReferenceError：MyHiFiRectangle未定义[了解更多]
ReferenceError: MyHiFiRectangle is not defined[Learn More]
我尝试重新排序HTML文件头标记中引用的* .js文件，但它们没有区别。
I tried reordering the *.js files which are referred in the head tag of the HTML file but they make no difference.
PS 我没有使用任何像Babel这样的转发器。我只是想在javascript中看到'class'和模块导出/导入构造（ECMA-6发布）的原生支持以及它是如何工作的。
P.S. I'm not using any transpilers like Babel. I'm just trying to see the working of native support of 'class' and module export/import construct (ECMA-6 release) in javascript and how it works.
推荐答案
我经历了这个，我有一个第三个js文件作为模块的解决方案。
rectangle.js将是相同的，myHifiRectangle.js文件只有一个修改。
I went through this and I have a solution with a third js file as module. rectangle.js will be same and myHifiRectangle.js file have only one modification.
import Rectangle from './rectangle.js';
export default class MyHiFiRectangle extends Rectangle {
constructor(height, width) {
super(height,width);
this.foo= "bar";
}
}
现在，我们需要第三个文件模块文件，比方说， script.js
Now, we need a third file which will be a module file, let say, script.js
import MyHiFiRectangle from './myHifiRectangle.js'
var v = new MyHiFiRectangle(2,4);
console.log(v.foo);
现在，第三个文件 script.js 应该成为一个模块。有关模块的更多信息，请访问此处。我在modelJS文件夹下有三个文件。
Now, the third file, script.js should be made a module. More on modules here. I have all three files under modelJS folder.
<script type="module" src="/modelJS/script.js"></script>
现在，当你跑步时，你应该在控制台中看到'bar'。
Now, when you run, you should see 'bar' in the console.
这篇关于如何在vanilla JavaScript中导入/导出类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
