asp.net MCVページからプレーンJavaScriptを使用してBrowserify TypeScriptバンドルを呼び出す

Question

asp.netには、TypeScriptを使用してクライアント側の処理を追加するMVCアプリケーションがあり、これをa.cshtmlファイルから呼び出すこのページ内のプレーンJavaScriptを使用するだけです）。私は私がする必要があるように見える最初の奇妙なことが..です、次のように私のtsconfig.jsonがある

/* 
    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() { 

    }); 

私は、次の一口ファイルを持ってがぶ飲みしてBrowserifyに

を使用して

{ 
    "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 
} 

をバンドルしていますbrowser32の呼び出しのためにentries:リストに各tsファイルを含めます。そうでないと、出力バンドルファイルに含まれるクラスのうちの1つまたは2つしか得られないようです。それらすべてとだけではなく、「トップレベル」のいずれかが必要です。

次の問題は、私はいくつかのをインスタンス化して呼び出したいということである理由を知りたいのですけれども、それらすべてを含むので

は、（動作するようですメソッドは、単純なブラウザのJavaScriptからです。他の投稿から、上記のようにstandalone: 'Intellisense'フラグを使うことができると言われていますが、これはグローバルオブジェクト "ABC"（int ehデバッガを見ることができます）を追加しますが、 （実際にエントリリストの最後のもの）

私はtsconfigモジュールをamdに変更しましたが、他のエラーがありました（commonjsに戻っています）。

ここからどこに行くのか本当に分かりません。 TypeScriptの世界を結びつけて非常に限定されたドコになっているように見えます。

ここにお手伝いいただければ幸いです。

Answer 1

Browerifyは、その中にバンドルされているもの以外でアクセスすることができます。つまり、外部のJavaScriptからエクスポートできないものがあります（これは私が実際に質問したものでした）。 Browerifyは、バンドル内のものをブラウザ内で動作させるだけです。あなただけのグローバル空間にオブジェクトを追加し、ちょうどこのには何も追加することができます外

ので

例えば...私のクラス（複数可）を露出させましたTSファイル内

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


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

と.cshtmlJavaScriptのにを持っているバンドルを含めるとちょうど以下のようにこのオブジェクトへのアクセスを取得...

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

はい、これはどのグローバル空間に何かを追加私は悪いことを知っていますが、それはただ一つの目的です。

もっと良い解決策があるのならまだ興味がありますが、少なくとも私のTSコードは使用できるようになりました。