Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I get TypeScript to bundle a 3rd party lib from node_modules?

Tags:

typescript

tsc

I would like the TypeScript Compiler to use node_modules/firebase/firebase.d.ts to typecheck my code and also bundle node_modules/firebase/firebase.js into some of the files where I import things from firebase. I understand there are many options which will do this for me, but I'd like to keep a minimal dev environment.

I have set "moduleResolution": "node" in my tsconfig.json, which imports the definitions and type checks my code as I want. I've also added "isolatedModules": true in an attempt to have it bundle the actual code into each of my targets, but the generated code does not bundle firebase.js as I would like. Is there a "module" compiler option which will do this for me, or should I be adding something else?

If I absolutely need another tool in my dev process, what is the simplest addition to tsc which will bundle each of my JS files + their dependencies into a single js file bundle?

like image 879
Andrey Fedorov Avatar asked Jul 03 '17 20:07

Andrey Fedorov


People also ask

What is Rollup TypeScript?

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD.

Is TSC a bundler?

The TypeScript Compiler (also known as "tsc") is the backbone of many bundlers, plugins, and tools that work with TypeScript.

Is TypeScript a bundler?

TypeScript supports bundling for AMD and System. js module formats.


1 Answers

tsc is a compiler, not a bundler. This question expounds on bundling a bit.

While developing in TypeScript, gulp + gulp-browserify can provide a watcher and bundler.

With "module": "umd" in the compiler options, this gulpfile.js will do the rest:

var gulp = require('gulp');
var ts = require('gulp-typescript');
var browserify = require('gulp-browserify');

gulp.task('default', function () {
  return gulp.src('src/*.ts')
    .pipe(ts.createProject('tsconfig.json')())
    .pipe(browserify())
    .pipe(gulp.dest('dist/gen'));
});

gulp.task('watch', ['default'], function () {
  gulp.watch('src/*.ts', ['default']);
});
like image 112
Andrey Fedorov Avatar answered Oct 05 '22 11:10

Andrey Fedorov