My current focus is on creating an effective workflow that involves using Gulp, Closure Compiler, and TypeScript with npm modules stored in a private Sinopia repository.
The ultimate objective is as follows:
To develop projects with browserify and TypeScript, then publish the shared code to the private npm repository.
To subsequently enhance a web application project using Closure Compiler.
(Closure Compiler isn't optional; UglifyJS doesn't provide the level of optimizations I require in terms of file size and performance)
Everything works smoothly when my project is self-contained within my source tree (i.e., without npm-installed modules). Here's the functional 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 }))
});
However, when integrating modules into the project, I encounter three intertwined issues:
Publishing the npm package and compiling the top-level project with TypeScript's
target: "es6"triggers a 'ParseError: 'import' and 'export' may appear only with 'sourceType: module'' error in Browserify under thecompile-devtask. Compiling the module with TypeScripttarget: "es5"resolves this issue but limits functionality to targeting "es5" across the board.Transitioning to "es5" leads to Closure Compiler raising an error like '
. This indicates that Closure Compiler struggles with consuming the es5 output from TypeScript.Error: build/main.js:2: WARNING - dangerous use of the global this object var __extends = (this && this.__extends) || function (d, b) {'If I persist with "es6" as the TypeScript target, both Browserify (
compile-dev) and Closure continue to face issues. Closure, understandably, cannot find my library because it doesn't search node_modules forimport Foo from "bar".
So, how can I:
- Instruct Closure Compiler to look in node_modules when importing external libraries (without requiring './')?
- Enable Browserify to process these es6 modules from npm effectively?