web-dev-qa-db-fra.com

Importer un module à partir d'une variable de chaîne

J'ai besoin d'importer un module JavaScript à partir d'une variable en mémoire. Je sais que cela peut être fait en utilisant SystemJS et Webpack.

Mais nulle part je ne peux trouver un bon exemple de travail ni de documentation pour le même. La documentation parle principalement de l'importation dynamique de fichiers .js.

Fondamentalement, je dois importer le module comme ci-dessous

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

Si quelqu'un peut pointer vers une documentation qui sera géniale

javascriptangulartypescriptwebpacksystemjs
9
Guru Kara

Il y a des limitations dans la syntaxe import qui rendent difficile, sinon impossible, l'utilisation de bibliothèques externes.

Le plus proche que j'ai pu obtenir est d'utiliser la syntaxe Dynamic Import . Un exemple suit:

<!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>

Vous remarquerez cependant que cela a certaines limites sur la façon dont le code d'importation est construit, qui peuvent ne pas correspondre précisément à ce dont vous avez besoin. La solution la plus simple est probablement d'envoyer le code du module sur le serveur pour qu'il génère un script temporaire qui sera ensuite importé en utilisant une syntaxe plus conventionnelle.

2
Filippo Possenti

Vous pouvez créer des composants et des modules à la volée. Mais pas de chaîne. Voici un exemple:

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";
});

Voici le stackblitz

2
Feroz Ahmed