Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Closure Compiler + Typescript

I want to use Typescript and then Closure Compile (advanced compilation) to target ES5 and minify the output.

Do I have to use tsickle in place of tsc? It lacks support for all the options tsc has, and is far ambitious in that it wants to translate Typescript types to Closure types (which are not 100% compatible). I don't really need to use Closure types; I just need minification/property renaming.

Can I use tsc to compile Typescript to ES6 modules and use Closure Compiler to minify those (without type checking or type-based optimzations)?

Bonus: Does this answer change if I want to use Closure Library?

like image 465
Paul Draper Avatar asked Jul 11 '17 23:07

Paul Draper


People also ask

What is closure in compiler?

What is the Closure Compiler? The Closure Compiler is a tool for making JavaScript download and run faster. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left.

Does angular use Closure Compiler?

The Closure Compiler is a very powerful expert tool that can reduce bundle sizes dramatically. The Angular Package Format makes sure that (own) Angular Modules work together with it. As Closure assumes that the code is written in a specific way it can be challenging to use it together with other packages.

What is Tsickle?

Tsickle is a library, designed to be used by a larger program that interacts with TypeScript and the Closure compiler. Some known clients are: Within Google we use tsickle inside the Bazel build system.


2 Answers

I realize I'm late to the party, but regarding the Closure library: There now is an active fork of an up-to-date version of the Closure library that has

  • Typescript definition (.d.ts) files
  • uses ES6 code instead of the custom goog.require, goog.define internally (so has no dependency on the Closure compiler)
like image 151
Daniel Veihelmann Avatar answered Oct 16 '22 10:10

Daniel Veihelmann


Technically, you can take ES6 output from tsc and pipe it immediately to Closure Compiler, as the latter is spec'ed to accept JS as input. We do this already in many places, eg. Angular apps compiled with closure compiler take the rxjs library distribution and include it in the closure bundle. See https://github.com/angular/closure-demo

In practice, we find a few reasons to use something like tsickle to transform the JS before Closure sees it.

  • enums emit doesn't work in Closure (or rollup IIUC)
  • Closure has some limitations with ES6, for example it currently doesn't support export * - tsickle re-writes that to export {each, visible, symbol}
  • adding JSDoc annotations helps closure understand the structure of the code which can improve optimizations and reduces the number of warnings it prints.

Our current plan is to decompose tsickle into multiple TS 2.3 emit transforms, then we can be more clear which transforms actually need to be enabled in the compiler.

Adding types is optional. If you turn off tsickle's typed mode, we'll just print {?} for the types instead. However, if you ever want to use TypeScript's output from closure JS code, then you'll want the closure type-checker to know the types.

If you're game for a new build tool, we will build tsickle into the Bazel toolchain in https://github.com/bazelbuild/rules_typescript at some point. In the meantime you can file a feature request for Tsickle's main to support more of the command-line flags. (But I think Lucidchart already maintains a fork of Tsickle?)

like image 36
Alex Eagle Avatar answered Oct 16 '22 10:10

Alex Eagle