Получение неожиданного экспорта токенов

Я пытаюсь запустить код 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: Неожиданный экспорт токена

Вам необходимо включить файл с атрибутом 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"]
}

Ответ обновлен благодаря комментарию @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/coreи @babel/presetкоторый преобразует ES6 в CommonJS цели , как узел 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"] }

Надеюсь, что это работает ... :)