使用普通 JavaScript 从 asp.net MCV 页面调用 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，否则我似乎只包含类中的一个或两个在输出包文件中。

所以，包括它们似乎都有效（虽然想知道为什么需要它们而不只是 "top level" 一个。

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

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

真不知道该何去何从。似乎将 TypeScript 世界与普通浏览器世界结合起来非常有限 JavaScript 世界。

如有任何帮助，我们将不胜感激！

Answer 1

据我所知，Browerify 捆绑的任何内容都不能在其中捆绑的内容之外访问，即任何人都可以访问 none 的导出external JavaScript （这就是我在问题中实际提出的问题）。 Browerify 只是让包中的东西在浏览器中工作。

因此，要在外部公开我的 class(es)，您只需向全局 space 添加一个对象，然后向其中添加任何内容...

例如在 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();

是的，这给全局添加了一些东西 space，我知道这很糟糕，但它只是一个对象。

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

使用普通 JavaScript 从 asp.net MCV 页面调用 Browserify TypeScript 包

Calling a Browserify TypeScript bundle from asp.net MCV page using plain JavaScript

javascript

browserify

typescript

gulp