web-dev-qa-db-ja.com

開発ツールコンソールからES6モジュールを使用する方法

私が理解している限り、ES6モジュールを作成すると、それ自体がモジュールであるコードからしかインポートできません。これは、非モジュールコード、つまりインラインJavaScript、またはChrome開発ツールコンソールがモジュール内のコードにアクセスできないことを意味します。

本当？これはかなり極端な制限のように見えるので、これを回避する方法はありますか？.

javascriptes6-modules
24
Timmmm

Chromeのコンソール内で 動的インポート を使用できます。

import('path/to/module.js').then(m => module = m)

// [doSomething] is an exported function from [module.js].
module.doSomething()
9
Kin

関数または変数をwindow.myFunction = myFunctionまたはwindow.myVariable = myVariableのような行でグローバル名前空間に登録できます。これは、myFunctionまたはmyVariableが宣言されているモジュールで行うか、インポートされた別のモジュールで行うことができます。

これを完了すると、Chrome DevToolsコンソールからmyFunctionおよびmyVariableを使用できるようになります。

例えば：

import myModule from '/path/to/module.js';
window.myModule = myModule;

// in the console:
myModule.foo();

（この解決策をコメントで提供してくれた@Evertにクレジットを送ってください。かなりわかりにくい方法でしたが、理解に時間がかかりました。）

1
Carl

これはnode.js 12.12.0TypeScriptを使用：

私のmain.tswtfnode をインポートし、それを global namesapaceに設定します。

import * as wtf from 'wtfnode';
(global as any).wtfm = wtf;

デバッガコンソールで、wtfmにアクセスできるようになりました。

wtfm.init();
wtfm.dump();
0
TmTron

importはモジュール機能であるため、他のモジュールからのみモジュールをインポートできます。

ES6モジュールの前にどのように「インポート」しましたか？それは存在しなかったので、あなたはそうしませんでした。 E6モジュールと実際にやり取りできるのは、2つの独立した非モジュールスクリプト間でやり取りした場合と同じです。

0
Evert

モジュールファイルを押したままchrome dev consoleにドラッグします。
必ずコンソールの入力行セクション（>の後）にドラッグしてください。

（これはmy Chrome 78 on Windows 10で動作します。）

0
Daniel Chin