samedi 18 mai 2019

How can use a typescript module as importable code AND as an ambient code for web

I need to have some javascript code that is usable in a browser as a "direct dependecy" via script tag import AND have the same code 'importable' in jest tests or in more structured code (like VueJS web app).

The reason is that I have a WebApplication with a lot of pages with simplier javascript that use some 'common' libraries (StringUtilities, RestUtilities etc..): all those libraries are written in Typescript as module so I can use all of them directly without any module loader system or webpack or whatever: only tsc needed. BUT now I'm doing some great stuff with VueJs and typescript and WebPack and I would like to re-use those libraries (are also well-tested with qunit), BUT when I try to make some tests in Jest I get an error because the common library is not present.

My modules are all like this:

module MyOrg {
  export module Str {
    export function IsNullOrEmpty(val: string | null | undefined): boolean {
      return val === undefined || val === null || val === "";
    }
  }
}

In a web page I can simply import it like:

<script src="js/MyOrg.Str.js"></script>

And finally use it like:

if (MyOrg.Str.IsNullOrEmpty("")){
 //..
}

In the meanwhile I whould like to have in my VueJs app a more modern approach like:

export function IsNullOrEmpty(val: string | null | undefined): boolean {
      return val === undefined || val === null || val === "";
    }
...

import {IsNullOrEmpty} from "MyOrg.Str";



I'm thinking that maybe i can rewrite all the modules as a list of export functions and render them usable by legacy code through a build system that transform the functions in a module: can be done? and how?

Tnx for attention




Aucun commentaire:

Enregistrer un commentaire