使用纯JavaScript从asp.net MCV页面调用Browserify TypeScript捆绑包

Question

I have an asp.net where I have an MVC application where I want to add some client side processing using TypeScript, and call this from a.cshtml file (just using plain JavaScript from within this page). I am bundling using Gulp and Browserify

I have the following gulp file

    /*
     Use gulp --production to minimize and skip source maps
     This skips the bundling jquery , so need to include this before the bundle
    */

    // Pass this to build in production
    var PRODUCTION_ARG = "production";

    // Itellisense related defines
    var INTELLISENSE_SRC_FOLDER = "UserControls/Intellisense/src";
    var INTELLISENSE_DEST_FOLDER = "UserControls/Intellisense/build";
    var INTELLISENSE_BUNDLE_FILENAME = "intellisense-bundle.js";

    var gulp = require('gulp');
    var del = require('del');
    var ts = require("gulp-typescript");
    var tsProject = ts.createProject("tsconfig.json");
    var browserify = require("browserify");
    var source = require('vinyl-source-stream');
    var tsify = require("tsify");
    var uglify = require('gulp-uglify');
    var buffer = require('vinyl-buffer');
    var argv = require('yargs').argv;
    gulpif = require('gulp-if');

    gulp.task('intellisense-clean', function () {
      return del([INTELLISENSE_DEST_FOLDER + '/**/*']);
    });

    gulp.task("intellisense-copy-html", function () {
      return gulp.src(INTELLISENSE_SRC_FOLDER + "/*.html")
          .pipe(gulp.dest(INTELLISENSE_DEST_FOLDER));
    });

    gulp.task("intellisense-copy-css", function () {
      return gulp.src(INTELLISENSE_SRC_FOLDER + "/*.css")
          .pipe(gulp.dest(INTELLISENSE_DEST_FOLDER));
    });

    gulp.task("build-intellisense", ["intellisense-clean", "intellisense-copy-html", "intellisense-copy-css"], function () {
      return browserify({
        basedir: '.',
        debug: true,
        standalone: 'ABC',
        entries: [INTELLISENSE_SRC_FOLDER + '/intellinode.ts',
                 INTELLISENSE_SRC_FOLDER + '/code-description-pair.ts',
                 INTELLISENSE_SRC_FOLDER + '/console-logger.ts',
                 INTELLISENSE_SRC_FOLDER + '/intellisense-control.ts'],

        cache: {},
        packageCache: {},    
      })
       .ignore('jquery')
       .plugin(tsify)
       .bundle()
       .pipe(source(INTELLISENSE_BUNDLE_FILENAME))
       .pipe(buffer())
       .pipe(gulpif(argv.production, uglify()))
       .pipe(gulp.dest(INTELLISENSE_DEST_FOLDER));   
    });

    gulp.task("default", ["build-intellisense"], function () {

    });

My tsconfig.json is as follows..

    {
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es3",
    "module": "commonjs"
  },
  "target": "es3",
  "files": [
    "./UserControls/Intellisense/src/*.ts"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "compileOnSave": true
}

The first weird thing is I seem to need to include each ts file in the entries: list for the call to browserify, otherwise I only seem to get one or 2 of the classes included in the output bundle file.

So, including them all seem to work (though would like to know why need them all and not just the "top level" one.

The next problem is that I want to instantiate and call some of the methods from plain browser JavaScript. From other posts, I am told I can use the standalone: 'Intellisense' flag as above. This then adds a global object "ABC" (which I can see int eh debugger) but only seems to include one of the TypeScript classes (infact the last one in the entries list)

I have changed the tsconfig module to amd but got other errors (so changed back to commonjs ).

I really do not know where to go from here. Seems to be very limited doco on marrying the TypeScript world back into plain browser JavaScript world.

Any help here would be greatly appreciated!

Answer 1

From what I could find out, nothing bundled by Browerify can be accessed outside of what is bundled within it, ie none of the exports are accessible by any external JavaScript (this was what I was actually asking in the question). Browerify just makes the stuff within the bundle work within the Browser.

So to expose my class(es) outside you can just add an object to the global space and just add anything to this...

Eg in the TS file have

 (function () {
   let w: any = window;
    w.TSModule = {};
    w.TSModule.CreateClassToExport = function() {
      return new ClassToExport();
    }       
  })();


export class ClassToExport {
    public doWork() : void{
    ...
    }

and in the .cshtml JavaScript include the bundle and just get access to this object as below...

 var myExport = TSModule.CreateClassToExport();
 myExport.doWork();

Yes this adds something to the global space which I know is bad, but it is only one object.

Still be interested if there are any better solutions, but at least I can now use my TS code.