0

I'm developing a custom component to a tool named PI Vision. It uses AngularJS, and to build the custom components you have to include a component-template.html, a component.js into a folder, and it loads dynamically the new component.

the component.js file must be in this format:

(function (CS,d3) {

// SOME MANDATORY CODE WITH THIS window.PIVisualization

// SOME CUSTOM CODE, WITH MY LOGIC

})(window.PIVisualization,d3);

What I'm trying to do, is to use TypeScript to generate this component.js, with all benefits from use typescript as ES6 support and stuff. But the problem is when I try to separate logic into files, I can not output in a single file with plain javascript.

I have my main component.js with:

import { MyClass } from "./myclass"

(function (CS,d3) {

// STUFF

let x = new MyClass("test");

// MORE STUFF

})(window.PIVisualization,d3);

the myclass.ts has:

export class MyClass {
    constructor(nome: string) {
        return nome;
    }
};

the tsconfig.json was tested with module AMD and outFile "./build/component.js"

The output is producing something like 

define("testclass", ["require", "exports"], function (require, exports) {
    "use strict";

And I don't believe it will run in the browser.

What I'm looking for is a way where when transpiled, the result will be a single file, with the definition of myclass before the IIFE (a namespace would be desirable) and the IIFE using that class.

Steve can help
  • 470
  • 7
  • 19
rafrcruz
  • 117
  • 7

1 Answers1

1

That's the expected output for "module AMD"; if you're not using a module loader, including the type bundled into newer versions of Javascript, it sounds like you want module "None". See the Typescript options docs for --module, though of course you can specify that in your tsconfig.json.

Note that the Javascript output will use IIFEs by default; if you want to change the way your code is encapsulated, you may need to change your Typescript input, in which case your question may benefit from posting the output of --module=None compared with your expectation.

Jeff Bowman
  • 90,959
  • 16
  • 217
  • 251
  • Yes, I figured that use the module None would make sense in that case, but is it not obsolete? And, if not, how would I manage to import logic from other files? For now What I'm doing is to just use a class in a separate file but when the transpile bundle the files, the generated class is in global scope. I tryed something like namespace MyNamespace { class MyClass() { constructor() {} } } but then I can not use it anymore in this namespace. – rafrcruz Jun 27 '19 at 19:57
  • @rafrcruz Yes it is obsolete, but it looks like you are trying to write something that runs directly in an ES5 browser, and that is going to limit your options. If you're comfortable relying on a module loader that defines `define` like [require.js](https://requirejs.org/), or comfortable generating a module that then gets compiled at the Javascript level through a tool like [webpack](https://webpack.js.org/), then your options improve. – Jeff Bowman Jul 01 '19 at 22:11