Problems building a closure-compiler/typescript front end workflow

Question

I'm trying to build a useful workflow using gulp, closure-compiler and typescript using npm modules hosted from a private sinopia repository.

The end goal is the following:

• To develop with browserify and typescript, and publish shared code to the private npm repository.

• To subsequently optimize a web application project using closure compiler.

(Closure compiler is not optional, UglifyJS does not perform the level of optimizations I want in terms of file size and performance)

This is all working perfectly when my project is entirely self contained in my source tree (i.e. I haven't npm installed any modules. Here is the working gulpfile:

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var size = require('gulp-size');
var server = require('gulp-live-server');
var typescript = require('gulp-typescript');
var closureCompiler = require('gulp-closure-compiler');

/** No minification */
gulp.task('compile-dev', function() {
    console.log("compile-dev at "+new Date())
    var b = browserify({baseDir: "src", debug: true})
        .add("src/main.ts")
        .plugin('tsify', { noImplicitAny: true, target: "es6"});
    b.bundle()
    .on('error', function(error) {
        console.error(error.toString());
    })
    .pipe(source("out.js"))
    .pipe(gulp.dest("www"))
})

/* minify with closure */
gulp.task('compile-closure', function () {
    gulp.src('src/**/*.ts')
    .pipe(typescript({target: "es6"}))
    .pipe(gulp.dest("build"))
    .pipe(closureCompiler({
        fileName: "out.js",
        compilerFlags: {
            language_in: "ES6",
            language_out: "ES5",
            compilation_level: "ADVANCED_OPTIMIZATIONS"
        }
    }))
    .pipe(gulp.dest("www"))
    .pipe(size({gzip: true, showFiles: true }))
});

Now I run into three interrelated problems using modules:

• publishing the npm package and compiling the toplevel project with typescript's target: "es6" causes browserify in the compile-dev task to choke with ParseError: 'import' and 'export' may appear only with 'sourceType: module'. If I compile the module with typescript target: "es5", we're back and working for compile-dev, so actually in that sense- compile-dev is working perfectly, assuming I target "es5" everywhere.

• moving down to "es5", causes closure compiler to choke with Error: build/main.js:2: WARNING - dangerous use of the global this object var __extends = (this && this.__extends) || function (d, b) { - closure doesn't like to consume the es5 that typescript produces

• if I stick with "es6" for the typescript target, not only does browserify choke on compile-dev, but closure also (perhaps understandably) still can't find my library because it does not know to look in node_modules if I import Foo from "bar".

So how can I:

• get closure-compiler to look in node_modules when I require from an external library (without a ./)?
• allow browserify to consume these es6 modules in npm?

Answer 1

This is not yet possible with closure compiler as the compiler does not know how to lookup named modules. The only option would be to use a bundler which can eliminate named module references prior to compilation.