Почему я получаю "Неожиданный импорт токена" в одном проекте webpack, но не в другом?

У меня есть два проекта, которые работают по-другому, и я не могу сказать, что другое. У меня есть один в одном проекте...

// In .ts wile
import 'core-js/es6';
import 'reflect-metadata';

Это отлично работает в одном проекте, однако другой проект с теми же tsconfig.json и typings.json, а также ts-loader, настроенный в конфигурации webpack, я получаю...

Uncaught SyntaxError: неожиданный импорт токена

Переданный JS на сбоя выглядит так:

/***/ function(module, exports, __webpack_require__) {

    /* WEBPACK VAR INJECTION */(function(process) {import 'core-js/es6';
    import 'reflect-metadata';

Я выложу следующий проект в бит

Итак, мой вопрос - что мне не хватает? Правильно ли импортированы определения typescript? Я уже попробовал запустить typings install снова, чтобы это исключить.

Дополнительная информация

//tsconfig
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

// Typings.json
{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

Ответы

Ответ 1

У меня была аналогичная проблема, когда я использовал async\await и Promises (обе конструкции ES6), используя ключевое слово import в исходных файлах ts для импорта других ts-модулей.

Я мог бы перетащить с помощью TypeScript, используя целевую версию js по умолчанию (ES5), которая создает ошибки пересылки, жалуясь на ключевые слова async\await и Promise, но так как я фактически выполняю Node 6.4.0. все на самом деле работает во время выполнения.

В случае, описанном выше, ключевое слово "Импорт" было переведено с ts на js следующим образом:

var BasePage_1 = require('./BasePage');

Итак, я получаю ошибки tsc transpile, но Node отлично работает во время выполнения с переводом "Import".

Если я использую ключ -t, чтобы передать tsc для передачи на ES6, то трансляция будет чистой без ошибок, но затем Node завершится с ошибкой, потому что она говорит, что не понимает ключевое слово "Импортировать" в выпущенном js файле.

Теперь tsc испускает следующий перевод для "Импорт":

import {BasePage} из './BasePage';

Итак, вышеупомянутый перевод действительно не является переводом вообще и Node дросселями в js файле с ключевым словом "Import" во время выполнения.

Резюме:

Я решил эту загадку, используя эту командную строку, чтобы сказать tsc использовать библиотеки ES6, но чтобы исправить правильный синтаксис импорта модуля:

myTypeScriptSourceFile.ts -t ES6 -m commonjs

Теперь я получаю чистую трансляцию и ошибки времени выполнения от Node. Потому что теперь 'Import' правильно переводится с использованием зарезервированного слова 'require'.

Подробнее здесь: https://www.typescriptlang.org/docs/handbook/compiler-options.html https://www.typescriptlang.org/docs/handbook/module-resolution.html

Ответ 2

В дополнение к принятому ответу для занятого программиста, опция командной строки также может быть сделана внутри файла tsconfig.json:

{
  "compilerOptions": {
    // ...other options
    "module": "commonjs", // add this
    "target": "es6", // and this
 }