我试图在我的项目中运行一些ES6代码,但我得到了一个意外的令牌导出错误。
export class MyClass {
constructor() {
console.log("es6");
}
}
我试图在我的项目中运行一些ES6代码,但我得到了一个意外的令牌导出错误。
export class MyClass {
constructor() {
console.log("es6");
}
}
当前回答
我遇到过这个问题,我花了一个小时才找到我的问题。
问题是我正在将我的代码从非模块更改为模块,并且我忘记删除导入的脚本文件。
我的“table.js”文件有以下一行。这是模块文件。
export function tableize(tableIdentifier) {
我的“orderinquiry.js”文件有以下一行。
import { tableize, changeColumnSizesDynamic } from '../common/table.js';
我的“orderinquiry.html”有以下两行。
<script src='/resources/js/common/table.js'></script>
<script type='module' src='/resources/js/client/orderinquiry.js'></script>
而第二行很好,声明type='module。但是第一行直接链接到table.js,导致了意外的错误。一切开始工作时,我删除了第一个<脚本>。
其他回答
我的意见
出口
ES6
myClass.js
export class MyClass1 {
}
export class MyClass2 {
}
other.js
import { MyClass1, MyClass2 } from './myClass';
CommonJS替代
myClass.js
class MyClass1 {
}
class MyClass2 {
}
module.exports = { MyClass1, MyClass2 }
// or
// exports = { MyClass1, MyClass2 };
other.js
const { MyClass1, MyClass2 } = require('./myClass');
出口违约
ES6
myClass.js
export default class MyClass {
}
other.js
import MyClass from './myClass';
CommonJS替代
myClass.js
module.exports = class MyClass1 {
}
other.js
const MyClass = require('./myClass');
安装babel包@babel/core和@babel/preset,这将把ES6转换为commonjs目标,因为node js不直接理解ES6目标
npm install --save-dev @babel/core @babel/preset-env
然后,您需要在项目的根目录中创建一个名为.babelrc的配置文件,并将这段代码添加到其中。
[“@babel/preset-env”]
在最新版本的Nodejs (v17?)中,您可以通过使用.mjs文件扩展名来使用顶级的“import”,“async”,“await”-而不是transpiling或变通方法。
// > node my.mjs
import {MyClass} from 'https://someurl'
async func () {
// return some promise
}
await func ()
我遇到过这个问题,我花了一个小时才找到我的问题。
问题是我正在将我的代码从非模块更改为模块,并且我忘记删除导入的脚本文件。
我的“table.js”文件有以下一行。这是模块文件。
export function tableize(tableIdentifier) {
我的“orderinquiry.js”文件有以下一行。
import { tableize, changeColumnSizesDynamic } from '../common/table.js';
我的“orderinquiry.html”有以下两行。
<script src='/resources/js/common/table.js'></script>
<script type='module' src='/resources/js/client/orderinquiry.js'></script>
而第二行很好,声明type='module。但是第一行直接链接到table.js,导致了意外的错误。一切开始工作时,我删除了第一个<脚本>。
通常import不能在.js扩展名中工作,因为默认情况下js意味着javascript的cjs版本。如果你想要es6特性,你需要将.js扩展名重命名为.mjs扩展名
parent.mjs
export default class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'I have a ' + this.carname;
}
}
child.mjs
import Car from './parent.mjs'
export default class Model extends Car {
constructor(brand, mod , country) {
super(brand);
this.model = mod;
this.country = country;
}
show() {
return this.present() + ', it is a ' + this.model + "i am from " +
this.country;
}
}
index . html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
shrink-to-fit=no">
<title>Quick Start Pack Template</title>
</head>
<div class="demo"></div>
<script type="module">
import Model from './child.mjs'
let value = new Model("Ford", "Mustang", "bangladesh")
document.querySelector(".demo").innerHTML = value.show()
</script>
</body>
</html>
最后在活动服务器上运行此代码