web-dev-qa-db-ja.com

文字列変数からモジュールをインポートする

メモリ内変数からJavaScriptモジュールをインポートする必要があります。 SystemJSおよびWebpackを使用してこれを実行できることを知っています。

しかし、どこでも私は同じための良い実用的な例やドキュメントを見つけることができません。ドキュメントでは、主に.jsファイルの動的インポートについて説明しています。

基本的に私は以下のようにモジュールをインポートする必要があります

let moduleData = "export function doSomething(string) { return string + '-done'; };"
//Need code to import that moduleData into memory

誰かが素晴らしいドキュメントを指すことができるなら

javascriptangulartypescriptwebpacksystemjs
9
Guru Kara

import構文には制限があり、外部ライブラリを使用しないと不可能ではないにしても、実行することは困難です。

私が得ることができる最も近いものは、 動的インポート 構文を使用することです。次に例を示します。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script>
    var moduleData = "export function hello() { alert('hello'); };";
    var b64moduleData = "data:text/javascript;base64," + btoa(moduleData);

</script>
<script type="module">

    async function doimport() {
      const module = await import(b64moduleData);
      module.hello();
    }

    doimport();

</script>

</body>
</html>

ただし、これにはインポートコードの構築方法にいくつかの制限があることに気づくでしょう。これは、必要なものと正確に一致しない場合があります。最も簡単な解決策は、サーバー上のモジュールのコードを送信して一時的なスクリプトを生成し、より一般的な構文を使用してインポートすることです。

2
Filippo Possenti

コンポーネントとモジュールをその場で作成できます。しかし、文字列からではありません。次に例を示します。

name = "Dynamic Module on Fly";
const tmpCmp = Component({
  template:
    '<span (click)="doSomething()" >generated on the fly: {{name}}</span>'
})(
  class {
    doSomething(string) {
      console.log("log from function call");
      return string + "-done";
    }
  }
);
const tmpModule = NgModule({ declarations: [tmpCmp] })(class {});

this._compiler.compileModuleAndAllComponentsAsync(tmpModule).then(factories => {
  const f = factories.componentFactories[0];
  const cmpRef = this.container.createComponent(f);
  cmpRef.instance.name = "dynamic";
});

これが stackblitz です

2
Feroz Ahmed