commonjs / amd モジュールをインポートするための新しい es6 構文(例:`import foo = require('foo')` )...
質問
以前はできたのですが。
import foo = require('foo');
しかし、TypeScript (1.5) が es6 モジュール構文をサポートした今、ES6モジュール構文で同じことを実現する正しい方法は何でしょう。
どのように解決するのですか?
正しい方法は、古いインポート構文を使い続けることです。新しいインポート構文は ES モジュール専用で、古いインポート構文は ES6 以前のモジュール用です。この 2 つは意図的に区別されています。
import * as foo from 'foo'
はすべての
プロパティ
モジュール 'foo' の
としてデフォルト値をインポートしません。
foo
.
機能の設計者から :
-
エクスポート・デフォルト宣言は常にdefaultという名前のエクスポートされたメンバーを宣言し、常にexports.defaultへの代入として発行されます。言い換えれば
export default
は一貫して ES モジュールのセマンティクスを持っています。Babel との互換性のために、私たちはオプションで__esModule
マーカーを出すことができますが、実際にはそのマーカーは何のためにも使用しません。 -
は
export =
宣言は、モジュール自身の代わりにエクスポートされる別の実体を代入するもので、 常にmodule.exports
. を使用するモジュールで他のエクスポートがあるのはエラーです。export =
. これは既存のTypeScriptの動作です。 -
を使用するモジュールは
export =
を使って別のモジュールをエクスポートしているモジュールは、新しい ES6 構造体を使用してインポートすることができます。特に、便利なデストラクチャリングインポートは、そのようなモジュールで使用することができます。を使用するパターンはexport =
を使用して別のモジュールをエクスポートするパターンは、内部モジュールのCommonJS/AMDビューを提供する.d.tsファイル(例:angular.d.ts)で一般的です。 -
を使用するモジュールは
export =
を使ってモジュール以外のエンティティをエクスポートしているモジュールは、既存のimport x = require("foo")
構文を使ってインポートしなければなりません。
2016年更新です。
TypeScriptコンパイラは、ある時点から
import * as foo from 'legacy-module-foo'
を特定の状況下でレガシーモジュールのデフォルトインポートを取得するようになりました。
これはES6仕様に違反するものである
(
§15.2.1.16
,
"値 "*"は、インポート要求がターゲットモジュールの
名前空間オブジェクト
."
).
この方法でインポートしたレガシーモジュールがES6モジュールに更新されると、それらのモジュールの「デフォルト」インポートは動作しなくなります(なぜなら
* as foo
のインポートは
のはずです。
をインポートしているはずです。
名前空間オブジェクト
をインポートすることになる)、これを行うことがTypeScript/SystemJSのハックであることを知らないと、非常に混乱するかもしれない。また、将来のTypeScriptのES仕様への再調整で、それらが壊れる可能性もあります。
そのため、ES6の名前空間インポートがどのように機能するかについて、あなた自身やあなたのコードで働く他の開発者を混乱させないため、そして混乱を招くような変更を避けるために、おそらくレガシーモジュールをロードするために、上記のレガシーインポート構文を使い続けることが望ましいと思われます。
関連
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] ES6インポートで中括弧を使用するのはどのような場合ですか?
-
[解決済み] JavaScriptでデフォルトのインポートのエイリアスを作成するにはどうすればよいですか?
-
[解決済み] モジュール 'module-name' の宣言ファイルが見つかりませんでした。'/path/to/module-name.js' は暗黙のうちに 'any' 型を持っています。
-
[解決済み] クラス定数を実装するには?
-
[解決済み】Node.jsのrequireとES6のimport/exportを使い分ける。
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] javascriptで文字列から関数を作成する方法はありますか?
-
[解決済み] 各オブジェクトに?重複
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] <Enter>でjQuery UIダイアログを送信する
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] AJAX Mailchimp サインアップフォームの統合
-
[解決済み] イテレータでmap()を使用する
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ
-
[解決済み] Typescriptのimport/asとimport/requireの違い?重複