plugin-typescript

plugin-typescript copied to clipboard

When using the plugin along with systemjs-builder and bundling into a single file, I'm getting some odd output when mixing in a regular .js file.

I've created a simple, file with the following:

vendor/test.js

const foo = 'bar'
export default foo

app/index.ts

import foo from 'vendor/test'
console.log(foo) // undefined in bundle, works fine when compiled in browser

When looking at the created bundle I'm getting the following output for the .js module:

System.register("vendor/test.js", [], function (_export, _context) {
    "use strict";

    return {
        setters: [],
        execute: function () {
            System.register([], function (exports_1, context_1) {
                "use strict";

                var __moduleName = context_1 && context_1.id;
                var foo;
                return {
                    setters: [],
                    execute: function () {
                        foo = 'bar';
                        exports_1("default", foo);
                    }
                };
            });
        }
    };

});

The nested System.register call seems odd to me ... when I manually amend to this it works:

System.register("vendor/test.js", [], function (exports_1, context_1) {
    "use strict";

     var __moduleName = context_1 && context_1.id;
     var foo;
     return {
         setters: [],
         execute: function () {
             foo = 'bar';
             exports_1("default", foo);
         }
     };
 });

This is my System.config file:

System.config({
  baseURL: '/',

  transpiler: 'plugin-typescript',

  typescriptOptions: {
    'module': 'System',
    'target': 'ES5',
    'noImplicitAny': true
  },

  paths: {
    'npm:': './node_modules/'
  },

  map: {
    'plugin-typescript': 'npm:plugin-typescript',
    'typescript': 'npm:typescript'
  },

  packages: {
    'plugin-typescript': {
      'main': 'lib/plugin.js'
    },
    'typescript': {
      'main': 'lib/typescript.js',
      'meta': {
        'lib/typescript.js': {
          'exports': 'ts'
        }
      }
    },
    'app': {
      'defaultExtension': 'ts',
      'main': 'index.ts'
    },
    'vendor': {
      'defaultExtension': 'js'
    }
  }
})

Try with

    'app': {
      'format': 'esm',
      'defaultExtension': 'ts',
      'main': 'index.ts'
    },

I get the same behavior when using the text plugin.