咕嘟咕嘟+ 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 +打字稿到瀏覽器

回答

相關問題