Systemjs-Builder - Cannot configure properly - Bundling Typescript into a package

Question

I want to build a quick nodejs script to package a Typescript app as SystemJS modules, a lot like what Angular2 bundles look like.

I tried different configurations but I can't seem to put my finger on it, and haven't found clear enough documentation as of yet.

Note that for this "test", I am not using Gulp or Jspm at all, just systemjs-builder for the time being (and don't plan on using jspm at all either)

Here's what my "project" looks like:

---- Project's Root

-------- index.ts // export * from './modules/index' and eventually more

-------- modules

------------ index.ts // export * from './menu/index'

------------ menu

---------------- menu.component.ts // export class

---------------- menu.service.ts // export class

I want to package this under a single file, where I will have multiple SystemRegister modules that can be consumed in an app thereafter

---

I tried the following without success:

var Builder = require('systemjs-builder');

// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('./modules');

builder.bundle('./modules/index.ts', {
    /* SystemJS Configuration Here */
    baseURL: './modules',
    transpiler: 'typescript',
    typescriptOptions: {
        "module": "system",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true
    },
    defaultExtension: 'ts',
    packages: {
        'modules': {
            defaultExtension: 'ts'
        }
    }
}, 'infrastructure.js')
      .then(function() {
        console.log('Build complete');
      })
      .catch(function(err) {
        console.error(err);
      })

First of all, the defaultExtension options doesn't seem to work at all So when I do import {something} from 'filePath'; (without extension), it tries to load filePath, instead of filePath.ts;

Second, if I try adding the .ts extension in my imports (which I don't want to do), it complains that the code is invalid (unexpected token @, unexpected token menuItem and so forth)

Anyone have a good example or some explanations on how this is supposed to work?

Thank you

Answer 1

Why do you want to bundle typescript? Bundling is a method used for optimizing the delivery of source code to the browser. The browser doesn't know typescript, it only knows javascript (unless you do on the fly transpiling).

Answer 2

here you have an example: angular typescript skeleton

build task looks like this:

  const path = require('path');
  const Builder = require('jspm').Builder;
  const builder = new Builder();
  const packageJson = require(path.join(config.projectDir, 'package.json'));

  return beginBuild()
    .then(buildSFX)
    .catch((err) => console.log('Build Failed', err));

  function beginBuild() {
    builder.reset();
    return builder.loadConfig(path.join(config.projectDir, packageJson.jspm.configFile))
  }

  function buildSFX() {
    const appName = packageJson.name;
    const distFileName = `${appName}.min.js`;
    const outFile = path.join(config.distDir, distFileName);
    const moduleName = 'app';
    const buildConfig = {
      format: 'global',
      minify: true,
      sourceMaps: true
    };
    return builder.buildStatic(moduleName, outFile, buildConfig);
  }

and jspm conf looks like this:

System.config({
  defaultJSExtensions: true,
  transpiler: "typescript",
  typescriptOptions: {
    "tsconfig": "src/tsconfig.json"
  },
  paths: {
    "github:*": "vendor/jspm_packages/github/*",
    "npm:*": "vendor/jspm_packages/npm/*",
    "app": "src/index"
  }
  /// ... 
  }