問題タブ [es6-modules]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
3 に答える
4188 参照

javascript - ES6 モジュールを使用している場合でも、モジュール ローダーは必要ですか?

残念ながら、JavaScriptモジュール ローダーに関する私の知識はまだ増え続けており、新しい との関係を理解し​​ようとしていES6 Modulesます。私の知る限り、モジュールローダーのようなものを使用するCommonJSか、準拠を使用するには、非同期モジュールローダーを使用してパフォーマンスを向上させ、それぞれのモジュールローダーの構文を使用して必要なときにのみロードする必要がありました。RequireJSES5JavaScript

ただし、ES6 モジュールのドキュメントを見て他の情報を読むと、モジュールの読み込みはimportandexportキーワードを介してネイティブにサポートされているようです。この場合、非同期モジュールの読み込みをネイティブにサポートしているため、またはES6 JS modulesのような追加のツールを使用する必要はありません。CommonJSRequireJS

0 投票する
3 に答える
7983 参照

javascript - Chrome デバッガーで ES6 モジュールを検査する方法

Webpack を使用してアプリケーションをバンドルする前は、IIFE を使用してモジュールを作成し、それらをwindowオブジェクトにアタッチしてアクセスできるようにしていました。これにより、Chrome ブラウザーでのデバッグが非常に簡単になりました。これは、モジュールがすべてグローバルに利用可能であり、ブレークポイントを使用して調べることができるためです。

最近、Webpack を使用してアプリケーションをバンドルするように移行しましたが、これはすばらしいことです。ただし、ブレークポイントを設定し、インポートされたモジュールを検査したい場合、モジュール名を参照して検査することはできません。これは、内部で Webpack がモジュールの名前を別の名前に変更しているためだと確信しています。

特定のファイルの import ステートメントの例を次に示します (ところで、インポートされた各モジュールはオブジェクトをインポートしています)。

インポートステートメント

そして、その同じファイルで、ブレークポイントを設定すると、以前のようにモジュールの内容を検査できるようにしたいと考えています。CustomHelpers下の画像では、オブジェクトに格納されたヘルパー関数のコレクションであるモジュールにアクセスしようとしています。

ブレークポイント付きのクロムコンソール

Chrome コンソールでデバッグ中にこれらのインポートされたモジュールを参照する方法について何か考えはありますか?

明確にするために、私webpack.config.jsは機能しており、ソースマップが有効になっているため、文字化けした bundle.js ファイルではなく元のファイルが表示されます。具体的には、インポートしたモジュールを調べて、その内容を確認しようとしています。

0 投票する
2 に答える
467 参照

typescript - Typescript と Babel を使用した Webpack ES6 モジュールのバンドル

webpack-stream を使用して gulp で web pack を使用する簡単なセットアップがあります。typescript を javascript に変換し、es6 モジュールを使用してすべてのモジュールを 1 つのファイルにバンドルしようとしています。

私のセットアップ(.babelrcファイルをes2015に設定しています):

このセットアップの結果は、私の typescript を index.ts にトランスパイルし、インポートをファイルに保持するだけです。構成のどこが間違っていますか?

0 投票する
1 に答える
475 参照

angularjs - Webpack および Typescript とのバンドル時にベンダーのインポートを無視する

Webpack を使用する場合、angular のようなサードパーティのライブラリを無視したくありません。自分で提供するからです。

次のエントリ index.ts があります。

これには、不要な角度ライブラリ全体がバンドルに含まれています。

インポートを取り除き、角度の入力に依存すると、次のエラーが発生します。

エラー TS2686: 'angular' は UMD グローバルを参照していますが、現在のファイルはモジュールです。代わりにインポートを追加することを検討してください

0 投票する
2 に答える
62 参照

javascript - JS: 関数を一種のモジュール パーツに分割する

ある種のモジュールを構築することで、このコードをより良い方法で構造化したいと考えています。ES6を使っているのでimport/にしてみましたexport

関数の例

だから私はこのようなものを手に入れたいと思っています。

script.js

また、すべてのコンテンツは別のファイルにある必要があります。

config.js

しかし、この試みには正しい構文がありません。これはどのように行うべきですか?

0 投票する
1 に答える
648 参照

node.js - Meteor Shell、どのフォルダーからでもファイルをインポートできません: エラー: モジュール '/imports/api/donuts/collection.js' が見つかりません

モジュールを meteor シェルにインポートするのに問題があります。

簡単な例:

1.新規プロジェクトの作成 (meteor create myproject)

2. ファイル /imports/api/donuts/collection.js を作成し、コンテンツを貼り付けます。

3.流星シェルを実行し、次の方法でファイルをインポートします。

このエラーが発生するよりも:

どうしたの?ファイルのアクセス許可は問題ありません。プロジェクト ルートから meteor シェルを起動します。

ありがとう!

0 投票する
1 に答える
190 参照

javascript - import * as name トークンの検出

import * as name from 'module-name'構文からのトークンにのみ適用したいコードを書いています。

それを行う方法はありますか?フラグまたは類似のものがあることを思い出しますが、__ESModuleそれは公式の仕様にはありません。そのため、それが正しいアプローチであるかどうかはわかりません (そして、それについて話している正確な記事が見つかりません。参考文献は素晴らしいでしょう)ヘルプ)。

つまり、これは私が望むものです (例では TypeScript を使用):

import * as name ...構文を説明する適切な名前は何ですか? :)

編集:質問にいくつかのコンテキストを追加します。

に似たようなことをしていaureliaますFrameworkConfiguration

someModuleそして、上記のようにのみ適用したいと思います。configure()これは、モジュールではないものに対して誤ってメソッドを実行したくないためです。

私のAPIはあり、消費者が(単に任意のクラス)get(key: Newable<T> | T): Promise<T>として何でもスローできるようにします。keyNewable<T>

@estus on__esModuleに感謝します。これは相互運用のためだけのものであるため、このコンテキストでは役に立たないことに気付きました。