jspm workflow for creating front-end libraries

Question

What is the current recommended practice for converting a library written in TypeScript to ES5?

JSPM documentation seems to be geared toward web apps (i.e. with jspm bundle-sfx).

All the articles I can find on Google seems to be assuming a web app workflow rather than a library workflow.

My projects have the following setup:

• It depends on react, flux and jquery, all installed through jspm and are properly configured in config.js

• The source .tsx/.ts files are located in a src/ tree, along with their corresponding transpiled .js files

• I am able to create a bundle with jspm bundle, however, this still requires the end user of my library to be using SystemJS

What I want is to bundle the entire tree under src/ into a single file without libraries such as react or jquery. How can I do this?

So far I've tried jspm bundle src/<MY_MAIN.js> - react - jquery <OUT.js> this works, but user still need a module loader to interact with exported symbols in MY_MAIN.js. I would also like to provide users with an option to manually import my library with <script> tags. self-executed bundles do not seem to work. No symbol is accessible globally once loaded through the <script> tag and I cannot exclude the framework code.

Answer 1

There are basically three approaches that I want to highlight, targeted at different end-user workflows

1. the <script/> tag approach

Here, create an entry .ts file that exports the main symbols of the library like so:

// Main.ts
import {MyLib} from "./components/MyLib";
import * as React from "react";
import * as ReactDOM from "react-dom";

/**
 * browser exports
 * note, typescript cannot use interfaces as symbols for some reason, probably because they are not emitted in the compiled output
 * running `jspm bundle-sfx` results in the code here being accessible in <script /> tag
 */

(function (window) {
    window.MyLib = MyLib;
    window.React = window.React || React;
    window.ReactDOM = window.ReactDOM || ReactDOM;
})(typeof window !== "undefined" ? window : {});

then run jspm bundle-sfx Main.js my-lib.sfx.js, the same works for browserify, except we have to use commonjs style require() instead of ES6 style import

2. Concat & Minify src files through regular gulp/grunt

this should just be the good old workflow we are all familiar with

3. Assume ES6 compatibility for apps that will use the library

Distribute the code as ES6/TS along with .d.ts and assume the user will also use jspm/system or eventual ES6 module loader approach to load your module