web-dev-qa-db-ja.com

SystemJS：エラーが発生するのはなぜですかjquery_1.defaultはjqueryをインポートするときに関数ではありません

Jspm install Foundationを介してFoundationをインストールしてから、Foundationとjqueryをインポートしました。

私が抱えている問題は、_import $ as 'jquery'_を介してjqueryをインポートすると、エラーが発生することです。jquery_1.defaultは関数ではありません。 _import * as $ from jquery_経由でjqueryをインポートすると、期待どおりに機能します

$(document).foundation();を呼び出して、基礎のjavascriptコンポーネントを初期化します。以下は私のmain.tsです

_import 'foundation'
import $ from  'jquery';
import {Aurelia} from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();    

  aurelia.start().then(a => a.setRoot())
      .then(a => {
        // Initialize framework
        $(document).foundation();
      });
}
_

コードの残りの部分は、ドロップダウンリスト付きの基礎ナビゲーションバーを含む単純なページへのデフォルトのナビゲーションです。

注：jqueryがdepとしてリストされている場合でも、jqueryを明示的にインストールする必要もありました。

Foundation 6の元のオーバーライドを作成しましたが、明らかに何か問題がありましたが、当時は機能しているようでした。ただし、bootstrapをインストールすると、jqueryがgithub：componentsに配置されるため、jqueryを明示的にインストールする必要がないことがわかりました。そのため、当時はすべて問題がなかったようです。 。

再現するには、aureliaスケルトンを使用し、ファンデーションコントロールを含むページを追加し、上記のように$（document）.foundation（）を追加します。

jquerytypescriptsystemjsjspm
11
dan

TsconfigでTypeScriptset module = systemを使用している場合：

{
  "compilerOptions": {
    "module": "system",
    "target": "es6",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "exclude": [
    "node_modules",
    "jspm_packages"
  ]
}
2
Ced

これはTypeScriptの問題だと思います。私の知る限り、レガシーコード、つまりエクスポートのないコードのes6スタイルのインポートステートメントは尊重されていません。古いスタイルのvar $ = require（ 'jquery'）を使用すると、機能します。

これに対する修正は、-allowSyntheticDefaultImportsフラグをtrueに使用することです。

TypeScriptの問題の下部にある最初のリンクは、この修正について説明しています

詳細については、これらのディスカッションを参照してください

SystemJSおよびdefault import with export =提案

es6構文でデフォルトをインポートすることはできません

適切なデフォルトの変数エクスポート構文が見つかりません

5
dan

次のように、"esModuleInterop": trueファイルのcompilerOptions内にtsconfig.json行を追加します。

{
"compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,  // <-- ADD THIS LINE
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
        "*": [
            "node_modules/*",
            "src/types/*"
        ]
    }
},
"include": [
    "src/**/*"
  ]
}

IntelliJを使用している場合、tsconfig.jsonの変更がすぐに検出されない可能性があるため、IntelliJを再起動して動作するかどうかを確認すると便利です。

重要な注意：

今回はimport * as express from 'express';表記でエラーになりますのでご注意ください。

TypeScript 2.7リファレンスを参照してください（ https://www.typescriptlang.org/docs/handbook/release-notes/TypeScript-2-7.html ）：

注：新しい動作は、既存のコードベースへの不当な中断を回避するためにフラグの下に追加されます。新規および既存のプロジェクトの両方に適用することを強くお勧めします。既存のプロジェクトの場合、名前空間のインポート（import * as express from "express"; express（）;）をデフォルトのインポート（import express from "express"; express（）;）に変換する必要があります。

5
Omer Gurarslan