web-dev-qa-db-ja.com

あるWebpackプロジェクトで「予期しないトークンのインポート」が行われ、他のプロジェクトでは行われないのはなぜですか？

動作が異なる2つのプロジェクトがあり、何が違うのかわかりません。私は1つのプロジェクトで次のものを持っています...

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

これは1つのプロジェクトでうまく機能しますが、同じtsconfig.jsonとtypings.jsonを持つ別のプロジェクトと、私が取得するwebpack設定で構成されたts-loader ...

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"
  }
}
typescriptwebpack
27
Jackie

他のtsモジュールをインポートするためにtsソースファイルでimportキーワードを使用してasync\awaitとPromises（両方のES6コンストラクト）を使用している場合、同様の問題がありました。

デフォルトのjsターゲットバージョン（ES5）を使用してTypeScriptでトランスパイルできます。これは、async\awaitおよびPromiseキーワードについて文句を言うトランスパイルエラーを生成しますが、実際にNode 6.4.0。実行時に動作します。

上記の場合、「Import」キーワードはtsからjsに次のように変換されました。

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

だから、私はTSCトランスパイルエラーを取得していますが、Nodeは上記の「インポート」翻訳で実行時に正常に動作します。

-tスイッチを使用してES6にトランスパイルするようにtscに指示すると、トランスパイルはエラーなしでクリーンになりますが、Nodeは失敗します。これは、発行されたjsファイル。

現在、tscは「インポート」に対して次の翻訳を出力します。

import 'BasePage} from' ./BasePage ';

したがって、上記の翻訳は実際にはまったく翻訳ではなく、Node実行時に 'Import'キーワードでjsファイルをチョークします。

概要：

このコマンドラインを使用してこの難問を解決し、ESCライブラリを使用するようにtscに指示しますが、適切なモジュールインポート構文を出力します。

myTypeScriptSourceFile.ts -t ES6 -m commonjs

これで、Nodeからクリーンなトランスパイルが取得され、ランタイムエラーは発生しません。 'Import'が'require'予約語を​​使用して適切に翻訳されているためです。

詳細はこちら： https://www.typescriptlang.org/docs/handbook/compiler-options.htmlhttps://www.typescriptlang.org/docs/handbook/module- resolution.html

31
Vance McCorkle

受け入れられた答えへの補遺忙しいプログラマーのため、コマンドラインオプションはtsconfig.jsonファイル：

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