如何在Vanilla JavaScript (JS)中导入/导出类
我用的是香草JavaScript。现在，我正在尝试利用导入/导出类和模块的概念，它们是ECMA-2015 (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";
}
}我试图在名为test.html的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。结果在不同的浏览器上是不同的。
在上，我得到了以下错误：
未登录的SyntaxError:意外的令牌导出
在上，我得到以下错误：
SyntaxError:导出声明只能出现在模块的顶层 SyntaxError:导入声明只能出现在模块的顶层 ReferenceError: MyHiFiRectangle不再是definedLearn了
我尝试重新排序JS文件，这些文件在HTML的head标记中引用，但没有产生任何影响。
注意:我再说一遍，我不会使用任何像Babel这样的转发器。我试图检查Vanilla中的导出/导入类和模块结构的本机支持以及它是如何工作的。
回答 4
Stack Overflow用户
发布于 2019-01-16 22:21:32
我经历了这个过程，我有一个解决方案，第三个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应该成为一个模块。关于模块这里的更多信息。我在modelJS文件夹下有所有三个文件。
<script type="module" src="/modelJS/script.js"></script>现在，当您运行时，应该会在developer工具的console选项卡中看到“bar”被打印出来。
Stack Overflow用户
发布于 2019-01-17 01:47:55
在这个线程中从奈特的回答获得提示后，我还添加了一个答案。
我将在原始代码文件中以精确的顺序方式指出错误。顺便说一句，我能够修复这个问题，而不涉及其他的script.js文件：
- 在引用JS模块时，脚本类型应该是模块。我指的是myHiFiRectancle.js，就像使用src标记的常规JS文件一样： Src=“脚本/myHiFiRecTangle.js” 我还导入了MyHiFiRectangle模块。以下是修复此错误后，head标记在test.html文件中的外观：
- myHiFiRectangle.js文件中缺少导出默认语句。当每个类必须从不同的地方使用时，都必须作为一个模块导出。经过更正的myHiFiRectangle.js文件如下所示： 导出默认类MyHiFiRectangle扩展矩形{构造函数(高度、宽度){超(高、宽)；this.foo= "bar"；}
- 我的脚本文件在导入模块的方式上有另一个错误。 不正确的方式： 从‘矩形’导入矩形；从‘/scripts/myHiFitagangle.js’导入MyHiFiRectangle； 它导致以下错误，这是不言自明的： 未解析的TypeError:未能解析模块说明符"rectangle.js“。相对引用必须以"/“、"./”或“./”开头。
正确方式：
从‘./矩形.’导入矩形；从‘./ MyHiFiRectangle /myHiFitagangle.js’导入矩形；
Stack Overflow用户
发布于 2017-06-12 02:59:30
我想向你展示@Andy发布的另一种解决方案。
首先，您需要babel，以确保您可以在浏览器中使用ES6。这是为了确保您的代码仍然工作，因为某些浏览器(如IE)不支持现代javascript (ES6及更高版本)功能，例如导入/导出和类。
您可以添加以下脚本
`<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>`在上面提到的任何其他javascript文件之前。
其次，如果您将javascript类内联地包括在内，那么这些类的范围就会变得全局化，即使它们驻留在它们自己的物理js文件中。
我已经包含了下面的工作示例，我对它做了一些修改，以便它能够在代码片段中工作。您希望将脚本替换为包含javascript文件的脚本，就像在代码中所做的那样。
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Javascipt by Rasik Bihari Tiwari</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<!-- Replace them with script with src pointing to your javascript -->
<script type="text/javascript">
class Rectangle{
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class MyHiFiRectangle extends Rectangle {
constructor(height, width) {
super(height,width);
this.foo= "bar";
}
}
var v = new MyHiFiRectangle(2,4);
console.log(v.foo);
</script>
</head>
<body >
</body>
</html>
更新
好的。凉爽的!顺便说一句，如果我将所有的类定义都引入到html页面本身的脚本标记中，那么我甚至不需要在head标记中引用babel-core。为什么要这么做？
对于不支持IE类的浏览器，您可能需要它。但是，如果旧浏览器的兼容性不在您的要求之内，那么您就不需要它了。
...do我甚至需要出口-进口的东西？当每个类或多或少是全局的时，本机javascript中的模块导出的意义是什么？
实际上，您不需要导出-导入的东西，因为您的类是全局的。只有当您想要使用模块系统时，才使用此方法。如果不使用导入/导出，那么类应该是全局的，因此应该工作。但万一它不知道为什么。通过将它附加到如下窗口对象，可以确保它是全局存在的：
window.myClass = class MyClass { /* Class definition */ }https://stackoverflow.com/questions/44490627
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号