咕嘟咕嘟+ Browserify +打字稿到浏览器

我用一口+ browserify编译我的打字稿为JavaScript，你可以在普通的HTML页面中使用，问题是，我的课从来都不是可以用浏览器：

VM633:1 Uncaught ReferenceError: Test is not defined 
    at <anonymous>:1:13

这是我的打字稿文件：

class Test { 
 
     public test(): void { 
 
      console.log("aa"); 
 
     } 
 
}

这是我gulpfile

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

 
gulp.task("default", function() { 
 
    return browserify({ 
 
     //basedir: '.', 
 
     debug: true, 
 
     entries: ['app/Resources/typescript/Test.ts'], 
 
     cache: {}, 
 
     packageCache: {} 
 
    }) 
 
     .plugin(tsify) 
 
     .bundle() 
 
     .pipe(source('bundle.js')) 
 
     .pipe(gulp.dest("web/bundles/framework/js")); 
 
});

文件编译没有问题，包括在我的index.html（编译js文件）。

但是当我尝试：

var t = new Test();

我得到以下错误：

VM633:1 Uncaught ReferenceError: Test is not defined 
    at <anonymous>:1:13

我解决不了的话，我已经阅读了很多，我的天堂没有发现任何明确的，我尝试了一切，没有任何工作。

来源

2017-09-25 redigaffi

有几件事情在这里失踪：

如果你希望你的类是你的模块的访问之外，你必须export它：

export class Test { 
    // ... 
}

Browserify在类的顶部创建功能你定义。所以它不能在全球范围内访问（这是一件好事）。通常你会导入在另一个文件中，并使用它：

// in any TS file that wants to use `Test` class. Make sure this is included in the gulp entries as well 
import {Test} from "test"; 
var t = new Test(); 
console.log(t);

或者，如果真的希望它是全球访问，则可以将其连接到window对象：

//在Test.ts文件：

(window as any).Test = Test; // This can be useful when debuging. But don't do this in production code.

来源

2017-09-25 17:21:24 Saravana

谢谢你，我试过它出口，但它不会工作，我想在我的index.html中使用我的类，是不是可能？或者我在我的ts类中与html进行交互，而不是在html中导入类？ – redigaffi

我不认为你可以单独使用Browserify在HTML内部转换。你可能不得不使用[插件像这样]（https://github.com/shama/scriptify）。或者，如果您已将类设置为“wiindow”对象，如上所示，您可以从任何地方访问它。 – Saravana

但我的想法是用TypeScript开发JavaScript，并在我的index.html中使用它，就像JavaScript一样，这有什么问题？为什么我不能使用编译的TypeScript，我不明白，它就像其他JS一样是普通的JavaScript。谢谢！ – redigaffi

咕嘟咕嘟+ Browserify +打字稿到浏览器

回答

相关问题