使用纯 JavaScript 从 asp.net MVC 页面调用 Browserify TypeScript 包

Question

我有一个 asp.net，我有一个 MVC 应用程序，我想在其中使用 TypeScript 添加一些客户端处理，并从 a.cshtml 文件中调用它（仅使用此页面中的纯 JavaScript）。我正在使用 Gulp 和 Browserify 进行捆绑

我有以下 gulp 文件

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

    });

我的tsconfig.json如下..

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

第一个奇怪的事情是我似乎需要将每个 ts 文件包含在 entries: 列表中以调用 browserify，否则我似乎只能获得输出包文件中包含的一个或两个类。

所以，包括它们似乎都可以工作（尽管想知道为什么需要它们，而不仅仅是“顶级”）。

下一个问题是我想从普通浏览器 JavaScript 中实例化和调用一些方法。从其他帖子中，我被告知我可以使用上面的standalone: 'Intellisense' 标志。然后添加一个全局对象“ABC”（我可以看到 int eh 调试器），但似乎只包含一个 TypeScript 类（实际上是条目列表中的最后一个）

我已将 tsconfig 模块更改为 amd，但出现其他错误（因此改回 commonjs）。

我真的不知道从这里去哪里。将 TypeScript 世界重新融入普通浏览器 JavaScript 世界似乎非常有限。

这里的任何帮助将不胜感激！

Answer 1

据我所知，Browerify 捆绑的任何内容都无法在其中捆绑的内容之外访问，即任何外部 JavaScript 都无法访问任何导出（这实际上是我的在问题中提问）。 Browserify 只是让捆绑包中的内容在浏览器中工作。

因此，要将我的类公开到外部，您只需将一个对象添加到全局空间，然后向其中添加任何内容...

例如在TS文件中有

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


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

并在.cshtml JavaScript 中包含捆绑包，然后就可以访问该对象，如下所示...

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

是的，这在全局空间中添加了一些我知道不好的东西，但它只是一个对象。

如果有更好的解决方案仍然很感兴趣，但至少我现在可以使用我的 TS 代码。