Отримання несподіваного експорту токена

Я намагаюся запустити якийсь код ES6 у своєму проекті, але я отримую несподівану помилку експорту токена.

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

Ви використовуєте синтаксис модуля ES6.

Це означає, що ваше середовище (наприклад, node.js) повинно підтримувати синтаксис модуля ES6.

NodeJS використовує синтаксис модуля CommonJS ( module.exports), а не синтаксис модуля ES6 (export ключове слово).

Рішення:

• Використовуйте babelпакет npm, щоб перевести ваш 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>

Ви отримаєте помилку:

Uncaught SyntaxError: Несподіваний експорт маркера

Вам потрібно включити файл з атрибутом типу, встановленим на "модуль":

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

Відповідь оновлена ​​завдяки коментарю @ghanbari до застосування babel 7.

В даний момент немає необхідності використовувати Babel (JS став дуже потужним), коли ви можете просто використовувати експорт модуля JavaScript за замовчуванням. Перевірте повний підручник

Message.js

module.exports = 'Hello world';

app.js

var msg = require('./Messages.js');

console.log(msg); // Hello World

Встановіть пакети babel @babel/coreі @babel/presetякі перетворять ES6 на спільну ціль, оскільки вузол js не розуміє цілі 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 не працює у вузлі, на жаль, ви повинні мати babel, мабуть, щоб компілятор розумів синтаксис, такий як експорт чи імпорт.

npm install babel-cli --save

Тепер нам потрібно створити .babelrc файл, у файлі babelrc ми встановимо babel використовувати попередньо встановлений es2015, який ми встановили як його попередньо встановлений під час компіляції в ES5.

У корені нашого додатку ми створимо файл .babelrc. $ npm встановити babel-preset-es2015 --save

У корені нашого додатку ми створимо файл .babelrc.

{  "presets": ["es2015"] }

Сподіваюся, що це працює ... :)