我试图在我的项目中运行一些ES6代码,但我得到了一个意外的令牌导出错误。
export class MyClass {
constructor() {
console.log("es6");
}
}
我试图在我的项目中运行一些ES6代码,但我得到了一个意外的令牌导出错误。
export class MyClass {
constructor() {
console.log("es6");
}
}
2022年更新
您正在使用EcmaScript模块(ESM或'ES6模块')语法,但您的环境不支持它。
v14.13.0之前的NodeJS版本不支持ESM(导出关键字语法),并使用CommonJS Modules (module. js Modules)。导出属性语法)。NodeJS v14.13.0及更新版本支持ESM,但必须先启用它。
解决方案:
If you are using NodeJS v14.13.0 or newer (which does support ESM) you can enable it by setting "type":"module" in your project package.json Refactor with CommonJS Module syntax (for older versions of NodeJS) Consider using TypeScript alongside ts-node or ts-node-dev npm packages (for instant transpilation at development time) and write TypeScript in .ts files Transpile ESM to CommonJS using esbuild (esbuild package on npm) configured to transpile your ES6 javascript to a CommonJS target supported by your environment. (babel is no longer recommended)
要使用ES6,请添加babel-preset-env
在你的。babelrc中:
{
"presets": ["@babel/preset-env"]
}
答案更新,感谢@ghanbari评论应用babel 7。
如果遇到此错误,也可能与将JavaScript文件包含到html页面的方式有关。在加载模块时,必须显式地声明这些文件。这里有一个例子:
//module.js:
function foo(){
return "foo";
}
var bar = "bar";
export { foo, bar };
当你像这样包含脚本时:
<script src="module.js"></script>
你会得到错误:
Uncaught SyntaxError:意外的令牌导出
你需要包含一个type属性设置为"module"的文件:
<script type="module" src="module.js"></script>
然后它应该会像预期的那样工作,你已经准备好在另一个模块中导入你的模块了:
import { foo, bar } from "./module.js";
console.log( foo() );
console.log( bar );
使用ES6语法不能在node中工作,不幸的是,你必须有babel显然使编译器理解语法,如导出或导入。
npm install babel-cli --save
现在我们需要创建一个.babelrc文件,在babelrc文件中,我们将设置babel使用我们在编译到ES5时安装的es2015预设。
在应用程序的根目录下,我们将创建一个.babelrc文件。 $ NPM install babel-preset-es2015—保存
在应用程序的根目录下,我们将创建一个.babelrc文件。
{ "presets": ["es2015"] }
希望它有用…:)
安装babel包@babel/core和@babel/preset,这将把ES6转换为commonjs目标,因为node js不直接理解ES6目标
npm install --save-dev @babel/core @babel/preset-env
然后,您需要在项目的根目录中创建一个名为.babelrc的配置文件,并将这段代码添加到其中。
[“@babel/preset-env”]
此时没有必要使用Babel (JS已经变得非常强大),因为您可以简单地使用默认的JavaScript模块导出。查看完整教程
Message.js
module.exports = 'Hello world';
app.js
var msg = require('./Messages.js');
console.log(msg); // Hello World
我通过制作一个入口点文件来解决这个问题。
// index.js
require = require('esm')(module)
module.exports = require('./app.js')
我在app.js内外导入的任何文件都可以使用导入/导出 现在你可以像node index.js一样运行它
注意:如果app.js使用export default,在使用入口点文件时,这将变成require('./app.js').default。
我的意见
出口
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');
当我试图在我的项目中导入本地javascript模块时,我也得到了意外的令牌导出错误。当在index.html文件中添加脚本标记时,我通过将类型声明为模块来解决这个问题。
<script SRC = "。/path/to/the/module/" type = "module"></script> .
实际上我想添加一个简单的解决方案。使用常量反撇号(')。
const model = `<script type="module" src="/"></<script>`
在最新版本的Nodejs (v17?)中,您可以通过使用.mjs文件扩展名来使用顶级的“import”,“async”,“await”-而不是transpiling或变通方法。
// > node my.mjs
import {MyClass} from 'https://someurl'
async func () {
// return some promise
}
await func ()
我让模块工作了一段时间,然后它们没有出现这个Uncaught SyntaxError:意外的令牌导出错误。
结果是,我添加了一个开大括号而没有一个闭大括号。喜欢的东西:
if (true) {
/* } missing here */
export function foo() {}
虽然最大的错误是忘记了end},但解析器首先在大括号内找到一个导出,这是不允许的。
export关键字必须在文件的顶层。
So:
if (true) {
export function foo() {}
}
也不合法。当解析器遇到这种情况时,它立即停止解析,模糊地宣布错误使用了export,并给出与加载使用export关键字的“非模块”JavaScript文件时相同的错误。它从不报告底层缺少大括号错误。
我花了很长时间才弄明白,所以我在这里发帖,以帮助未来的患者。
理想情况下,解析器将报告只允许在文件的顶层导出。
我遇到过这个问题,我花了一个小时才找到我的问题。
问题是我正在将我的代码从非模块更改为模块,并且我忘记删除导入的脚本文件。
我的“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,导致了意外的错误。一切开始工作时,我删除了第一个<脚本>。
对于那些在2022年看到这篇文章的人来说,我也犯了同样的错误,但我把代码改成了这样:
module.exports = () => {
getUsers: () => users;
addUser: (user) => users.push(user);
};
通常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>
最后在活动服务器上运行此代码
只需使用tsx作为运行时而不是节点。它将允许你使用正常的import语句,而不必将你的项目切换到type: module,也不必处理type: module的讨厌后果。此外,你还将获得TypeScript支持。