I have a very simple program to learn how to work with TypeScript, I bundled all my .ts files using Browserify to make it possible to run inside the browser.

Just imagine very simple variable declaration in TypeScript:

main.ts
let testVar = "Something";

And here is my gulpfile.js to pile (and bundle the files when needed):

'use strict';

var gulp = require('gulp');
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var minify = require('gulp-minify');


gulp.task('build',['minify'], function () {

    return browserify({
        basedir: '.',
        debug: true,
        entries: ['src/main.ts'],
        cache: {},
        packageCache: {}
    })
        .plugin(tsify)
        .bundle()
        .pipe(source('main.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest("dist"));

});

gulp.task('minify',function () {
    gulp.src('dist/main.js')
        .pipe(minify({
            ext:{
                src:'.js',
                min:'.min.js'
            },
            ignoreFiles: ['.min.js']
        }))
        .pipe(gulp.dest('dist'));
});

and this is my tsconfig.json

{
  "pilerOptions": {
    "module": "system",
    "sourceMap": true,
    "lib": ["dom", "es2015.promise", "es5"],
    "noImplicitAny": true,
    "target": "es2015"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src/**/*"
  ],
  "files": [
    "src/**/*"
  ]
}

The build task work as expected, and what that I have inside the typescript works well too. But, when I include the bundled and piled into my .html file, and trying to access the testVar variable. by just easily calling it in Chrome console, console.log(testVar); but it returns error:

Uncaught ReferenceError: testVar is not defined

And here is the piled + bundled .js file:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
let testVar = "Something";
},{}]},{},[1])

//# sourceMappingURL=main.js.map

How can I access the functions and variables inside the bundled .js file? How to design API of my library in TypeScript? (any good resource)

I have a very simple program to learn how to work with TypeScript, I bundled all my .ts files using Browserify to make it possible to run inside the browser.

Just imagine very simple variable declaration in TypeScript:

main.ts
let testVar = "Something";

And here is my gulpfile.js to pile (and bundle the files when needed):

'use strict';

var gulp = require('gulp');
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var minify = require('gulp-minify');


gulp.task('build',['minify'], function () {

    return browserify({
        basedir: '.',
        debug: true,
        entries: ['src/main.ts'],
        cache: {},
        packageCache: {}
    })
        .plugin(tsify)
        .bundle()
        .pipe(source('main.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest("dist"));

});

gulp.task('minify',function () {
    gulp.src('dist/main.js')
        .pipe(minify({
            ext:{
                src:'.js',
                min:'.min.js'
            },
            ignoreFiles: ['.min.js']
        }))
        .pipe(gulp.dest('dist'));
});

and this is my tsconfig.json

{
  "pilerOptions": {
    "module": "system",
    "sourceMap": true,
    "lib": ["dom", "es2015.promise", "es5"],
    "noImplicitAny": true,
    "target": "es2015"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src/**/*"
  ],
  "files": [
    "src/**/*"
  ]
}

The build task work as expected, and what that I have inside the typescript works well too. But, when I include the bundled and piled into my .html file, and trying to access the testVar variable. by just easily calling it in Chrome console, console.log(testVar); but it returns error:

Uncaught ReferenceError: testVar is not defined

And here is the piled + bundled .js file:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
let testVar = "Something";
},{}]},{},[1])

//# sourceMappingURL=main.js.map

How can I access the functions and variables inside the bundled .js file? How to design API of my library in TypeScript? (any good resource)

• javascript
• typescript

• Are you sure the variable name is still testVar because it looks as if you minify your code. – Nico Van Belle Commented Feb 14, 2017 at 20:24
• @NicoVanBelle, Yes, it is still testVar – TypeScript Learner Commented Feb 14, 2017 at 20:35

2 Answers 2

your code should work as expected, you just need to add standalone to your Browserify config

This should be your Browserify task on Gulp:

 return browserify({
        standalone: "yourLib",
        basedir: '.',
        debug: true,
        entries: ['src/main.ts'],
        cache: {},
        packageCache: {},
    })

Look at standalone: "yourLib".

Now you need to export something in your main.ts file, for example:

//main.ts
export function whatsYourName(name:string){
 console.log(name);
}

Now just run your gulp build task (which will pile and browserify/bundle your ts files), include that bundled script into your page, open Chrome console (F12) and inside the console tab just write the name of what you defined for standalone in your browserify task (here we named that yourLib).

For our example, you just need to type this in the console to get the response:

yourLib.whatsYourName("Alex");

How to design API of my library in TypeScript? (any good resource)

Really a build tool chain question. If you want to expose your library as a global the answer is dependent on your toolchain. I remend using webpack. Here is a a sample config:

module.exports = {
    /** Build from built js file */
    entry: {
      typestyle: './lib/index.js',
    },
    output: {
        filename: './umd/typestyle.js',
        libraryTarget: 'umd',
        /** The library name on window */
        library: 'typestyle'
    }
};

From the TypeStyle project.