Write TypeScript and emit a library for Browser and Node

Question

I have an internal library used in Node.js and browser. It has many files, concatenated with a Grunt task and different prologues, one for browser, one for Node:

browser:

// dependent 3rd-party libs like Mustache are already global
window.myLib = { /*just a namespace object filled with stuff later*/ }

// then comes the plain javascript which just adds elements to myLib.
// This part is identical to that used in Node
// example:
myLib.renderPartDetail = function (...) {...};

Node:

var Mustache = require('mustache');
var myLib = {};
module.exports = myLib;

// then comes the plain javascript which just adds elements to myLib.
// This part is identical to that used in Browser

This results in 2 different single output js files, one for browser, one for Node.

What I'd like

• use TypeScript
• if possible, use only one CommonJS syntax (or ES6 modules) for both browser and node
• invest in something not dying in the next couple of months
• be a bit more modular (maybe somebody needs only part of the lib)

What confuses me

I find 2 different kinds of module handling in TypeScript:

import {a, b} from './x'

and

import c = require('./y')

I'm used to the latter from node, but the first looks like ES6 (which might be the future).

Currently I use tsc --module commonjs but this is only the output format, right? There is also --module system but I can't find documentation for this option and when I use it, the compiler complains about export = ... is not allowed.

Haven't yet played around with browserify, tsify, watchify, jspm, SystemJS, webpack - it's just too similar and too much, but I think one or a few of those tools could do the work for me.

And when I require(<a node module living in node_modules>), tsc cannot find the module: "TS2307: Cannot find external module 'moment'".

Concrete Questions

• Which module syntax should I use in my code to best work with Node and Browser?
• Which tool-chain will solve my requirements? Is there an example project or a boilerplate where I can copy from? (I'm open to Gulp as well, doesn't have to use Grunt).
• Which TypeScript and Node versions are currently supported? I'm having 1.4 embedded in IntelliJ, when referencing 1.6.2 as external I'm getting very deep cryptic error messages like "TypeError: host.fileExists is not a function" (not finding anything helpful about this). Maybe it's not optimal to use Node v4.1.1?

I'm sorry that this post is so complex. If necessary, just give me advise where to start or what is the most important thing to change or begin with.

Answer 1

Which module syntax should I use in my code to best work with Node and Browser?

If you are targetting es5 then both syntaxes compile down to effectively the same thing. Use either, and feel free to mix and match.

Which tool-chain will solve my requirements? Is there an example project or a boilerplate where I can copy from

I use (and recommend) webpack. You get to use commonjs / nodejs as it is and then webpack can create bundles for front end. For a sample see https://github.com/basarat/tsb/tree/master

Which TypeScript and Node versions are currently supported? I'm having 1.4 embedded in IntelliJ, when referencing 1.6.2 as external I'm getting very deep cryptic error messages like "TypeError: host.fileExists is not a function" (not finding anything helpful about this). Maybe it's not optimal to use Node v4.1.1?

Use the latest TypeScript (various tools from TypeStrong e.g. atom-typescript/grunt-ts/ts-loader support that). The error you are getting is a webstorm error and should be reported to them. (I use atom-typescript).

Answer 2

I also have the TypeError: host.fileExists error with WebStorm 10 and a custom Typescript compiler (installed via npm).

However, this is fixed in WebStorm 11 (released Nov 2, 2015) https://www.jetbrains.com/webstorm/download/