프로젝트에서 일부 ES6 코드를 실행하려고하는데 예기치 않은 토큰 내보내기 오류가 발생합니다.
export class MyClass {
constructor() {
console.log("es6");
}
}
module.exports = MyClass
하지,export class MyClass
프로젝트에서 일부 ES6 코드를 실행하려고하는데 예기치 않은 토큰 내보내기 오류가 발생합니다.
export class MyClass {
constructor() {
console.log("es6");
}
}
module.exports = MyClass
하지,export class MyClass
답변:
ES6 모듈 구문을 사용하고 있습니다.
이는 환경 (예 : node.js)이 ES6 모듈 구문을 지원해야 함을 의미합니다.
NodeJS는 module.exports
ES6 모듈 구문 ( export
키워드)이 아닌 CommonJS 모듈 구문 ( )을 사용합니다 .
해결책:
babel
npm 패키지를 사용 하여 ES6를 commonjs
대상으로 변환또는
CommonJS 구문의 예는 다음과 같습니다 ( flaviocopes.com/commonjs/ ).
exports.uppercase = str => str.toUpperCase()
exports.a = 1
import
기본적으로 지원 됩니까? 나는 v10.0.0이 그것을 가질 것이라고 생각했지만 분명히 그렇지는 않았다.
이 오류가 발생하면 javascript 파일을 html 페이지에 포함시킨 방법과 관련이있을 수 있습니다. 모듈을로드 할 때 해당 파일을 명시 적으로 선언해야합니다. 예를 들면 다음과 같습니다.
//module.js:
function foo(){
return "foo";
}
var bar = "bar";
export { foo, bar };
다음과 같이 스크립트를 포함시킬 때 :
<script src="module.js"></script>
오류가 발생합니다.
잡히지 않은 구문 오류 : 예기치 않은 토큰 내보내기
type 속성이 "module"로 설정된 파일을 포함해야합니다.
<script type="module" src="module.js"></script>
그런 다음 예상대로 작동하고 모듈을 다른 모듈로 가져올 준비가되었습니다.
import { foo, bar } from "./module.js";
console.log( foo() );
console.log( bar );
type
유효한 MIME 유형 (일명 매체 유형)으로 예상되는 w3c 표준 에 따라 예상치 못한 결과가 발생했습니다. 감사!
<script type="module">import ...</script>
모듈에서 가져올 때는 을 사용해야 합니다. 최신 버전의 Chromium에서 테스트했습니다.
내 두 센트
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');
도움이 되었기를 바랍니다
ES6를 추가하려면 babel-preset-env
그리고 당신의 .babelrc
:
{
"presets": ["@babel/preset-env"]
}
babel 7을 적용하기 위해 @ghanbari 의견 덕분에 답변이 업데이트되었습니다.
babel
저자 가 이미 태그 했습니다. Phil Ricketts의 답변이 문제를 명확하게 설명하지만이 답변은 저자의 문제에 대한 직접적인 해결책입니다.
기본 JavaScript 모듈 내보내기를 간단히 사용할 수있을 때는 현재 Babel을 사용할 필요가 없습니다 (JS는 매우 강력 해졌습니다). 전체 튜토리얼 확인
Message.js
module.exports = 'Hello world';
app.js
var msg = require('./Messages.js');
console.log(msg); // Hello World
바벨 패키지를 설치 @babel/core
하고 @babel/preset
있는 직접 ES6 목표를 이해하지 못하는 노드 JS로 commonjs 대상에 ES6를 변환합니다
npm install --save-dev @babel/core @babel/preset-env
그런 다음 .babelrc
프로젝트의 루트 디렉토리에 이름 을 가진 하나의 구성 파일을 작성 하고 여기에이 코드를 추가해야합니다.
{
"presets": ["@babel/preset-env"]
}
나는 엔트리 포인트 파일을 만들어서 이것을 고쳤다.
// index.js
require = require('esm')(module)
module.exports = require('./app.js')
내부 app.js
및 외부에서 가져온 파일 은 imports/exports
지금처럼 작동합니다.node index.js
참고 : 경우에 app.js
사용 export default
이가된다 require('./app.js').default
엔트리 포인트 파일을 사용하는 경우.
불행히도 ES6 구문을 사용하는 것은 노드에서 작동하지 않습니다. 불행히도 컴파일러가 내보내기 또는 가져 오기와 같은 구문을 이해하게하려면 명백히 바야합니다.
npm install babel-cli --save
이제 babelrc 파일에서 .babelrc 파일을 만들어야합니다. 우리는 babel을 ES5로 컴파일 할 때 사전 설정으로 설치 한 es2015 사전 설정을 사용하도록 설정합니다.
앱의 루트에서 .babelrc 파일을 만듭니다. $ npm install babel-preset-es2015-저장
앱의 루트에서 .babelrc 파일을 만듭니다.
{ "presets": ["es2015"] }
그것이 효과가 있기를 바랍니다 ... :)
export
ES6에서만 사용 가능한 webpack 또는 babel이 올바르게 작동하지 않으며 해당 모듈이 ES6 지원을 제공한다는 것을 나타냅니다.