How to properly tree-shake with buildstatic?

[RoxKilly]

Please bear with me; I'm new to professional build tools.

I'm learning Angular 2 with typescript 2. I use gulp to manage build tasks. First I transpile TS to JS with gulp-typescript

gulp.task('build-ts', function () {
    var tsProject = ts.createProject('tsconfig.json', { typescript: require('typescript') });
    return gulp.src('dev/**/*.ts').pipe(ts(tsProject)).pipe(gulp.dest('dist/'));
});

Then I use SystemJS-builder to create one self-executing bundle:

gulp.task('bundle',['build-ts'],function(){
    var builder = new Builder('','./systemjs.config.js');
    return builder.buildStatic('dist/main.js', 'dist/bundle.js', 
                                         {minify: true, encodeNames:false})
});

I would still like to reduce the size of bundle.js. Is it possible to use this tool to do tree-shaking and remove unused functions/classes from dependencies?

I've tried setting rollup:true in buildStatic's 3rd parameter, but the resulting bundle has the exact same size.

systemjs-builder 0.15.31, systemjs 0.19.39

[asapach]

Rollup only works for ES6 modules and my guess is that your gulp task transpiles to either commonjs or system format. Try using https://github.com/frankwallis/plugin-typescript#rollup-support

[RoxKilly]

@asapach Thanks for the link. I followed the advice and installed plugin-typescript, but I am unable to use it. Please see whether anything jumps out as incorrect:

systemjs.config.js

System.config({
    transpiler: "ts",                                  // this is plugin-typescript 5.2.6
    typescriptOptions: { typeCheck: true, tsconfig: true },
    map: { app: 'dev', '@angular': 'node_modules/@angular' },
    packages: {
        app: {
            main: './main.ts',
            defaultExtension: 'ts' ,
            meta: { '*.ts': {'loader':'ts'} }
        },
        '@angular/core':  {main: './bundles/core.umd.js', defaultExtension:'js'},
        ...
        "ts":             { main: "./lib/plugin.js"},
        "typescript": {                                   // this is typescript 2.0.3
            main: "./lib/typescript.js",
            meta: {"./lib/typescript.js": {"exports": "ts"} }
        }
    }
});

tsonfig.json

"compilerOptions": {
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "./dist",
    "baseUrl": "."
},

systemjs-builder gulp task

gulp.task('bundle', function() {
    var builder = new SystemBuilder();
    builder.loadConfig('./systemjs.config.js').then(function(){
            return builder.buildStatic('app', 'dist/bundle.js');
        });
});

When I execute the gulp task, this error is thrown:

Cannot find module '@angular/core'

The path node_modules/@angular/bundles/core.umd.js is resolved correctly (If I change the file name, a file not found error ensues), but the module is not found.

[RoxKilly]

To resolve this I had to create another task that runs the typescript compiler first, to transpile .ts to .js files:

var exec = require('child_process').exec;

// this task will process TS files with settings from tsconfig.json
// and generate Javascript files
gulp.task('tsc', function (cb) {
    exec('"node_modules/.bin/tsc" -p ./', function (err, stdout, stderr) {
        console.log(stdout);
        console.log(stderr);
        cb(err);
    });
});

After this, I could run the bundling task:

// this task uses main.js as a starting point, and bundles the whole project
// into one Javascript file
gulp.task('bundle', function() {
    var builder = new SystemBuilder();
    builder.loadConfig('./systemjs.config.js').then(function(){
            return builder.buildStatic('dist/main.js', 'dist/bundle.js',
                            {minify: true, encodeNames:false, rollup:true}
            );
        });
});

As @asapach pointed out, I needed to set "module":"es6" in tsconfig.json