예기치 않은 토큰 내보내기

프로젝트에서 일부 ES6 코드를 실행하려고하는데 예기치 않은 토큰 내보내기 오류가 발생합니다.

export class MyClass {
  constructor() {
    console.log("es6");
  }
}

ES6 모듈 구문을 사용하고 있습니다.

이는 환경 (예 : node.js)이 ES6 모듈 구문을 지원해야 함을 의미합니다.

NodeJS는 module.exportsES6 모듈 구문 ( export키워드)이 아닌 CommonJS 모듈 구문 ( )을 사용합니다 .

해결책:

• babelnpm 패키지를 사용 하여 ES6를 commonjs대상으로 변환

또는

• CommonJS 구문으로 리팩터링하십시오.

CommonJS 구문의 예는 다음과 같습니다 ( flaviocopes.com/commonjs/ ).

• exports.uppercase = str => str.toUpperCase()
• exports.a = 1

이 오류가 발생하면 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 );

내 두 센트

수출

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 의견 덕분에 답변이 업데이트되었습니다.

기본 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"] }

그것이 효과가 있기를 바랍니다 ... :)