找不到从Typescript构build的JavaScript类
情况
我正在打字的webapp的前面，我编译成JS。 我想对生成的js运行qunittesting。 我的打字稿是合并在一个文件中使用browserify我想对我的js对象运行testing。 我使用war包在tomcat web服务器上运行没有节点的js。
问题
我找不到我生成的类js（访问问题或隐藏对象….）？ 当我尝试在js脚本中使用animal.js时，动物类是不可访问的！？ 如何在js中访问这个类？ 我想运行没有错误，animal.test.html。
animal.ts
export class Animal { name:string; constructor(name:string) { this.name=name; } public run(){ console.log('${this.name}:Animal runs.'); } public eat(){ console.log('${this.name}:Animal eats.'); } public sleep(){ console.log('${this.name}:Animal sleeps.'); } } animal.js （来自animal.ts）
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ "use strict"; var Animal = (function () { function Animal(name) { this.name = name; } Animal.prototype.run = function () { console.log('${this.name}:Animal runs.'); }; Animal.prototype.eat = function () { console.log('${this.name}:Animal eats.'); }; Animal.prototype.sleep = function () { console.log('${this.name}:Animal sleeps.'); }; return Animal; }()); exports.Animal = Animal; },{}]},{},[1]);
animal.build.js
var browserify = require('browserify'); var tsify = require('tsify'); browserify() .add('src/test/typescript/animal.ts') .plugin(tsify, { noImplicitAny: true }) .bundle() .on('error', function (error) { console.error(error.toString()); }) .pipe(process.stdout);
构build运行命令我使用节点与menuscript lang site中引用的browserify
node animal.js > src/test/typescript/animal.js
animal.test.js
QUnit.module( "Form test" ); QUnit.test( "hello test2", function( assert ) { var a = new Animal("toto"); assert.ok( a!==undefined && a!=null); });
animal.test.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>QUnit Example</title> <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.23.0.css"> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <script src="https://code.jquery.com/qunit/qunit-1.23.0.js"></script> <script src="animal.js"></script> <script src="animal.test.js"></script> </body> </html>
Qunit回应 
因为你正在试图访问window.Animal但它肯定不在那里。 您需要另一个JS / TS文件，您应该使用QUnits但不包括在开发/生产代码：
test_main.ts ：
import {Animal} from './animal'; window.Animal = Animal; // or global.Animal = Animal // I don't know if browserify converts // "global" to "window" or not.
现在用.add('src/test/typescript/animal.ts')replace.add('src/test/typescript/animal.ts') 。
什么问题？
如果您使用的是ES6导出/导入模块，那意味着您正在使用“CommonJS”模块系统。 当您使用tsify ，Typescript代码被转换为节点兼容的JS代码。 然后你使用browserify把节点兼容的JS代码转换成浏览器兼容的JS代码。 浏览器本身不支持CommonJS模块系统。 所以“browserify”试图模仿它，这就是为什么你需要提供一个入口点。
还有其他解决scheme可以解决您的问题，例如，您可以在TypeScript或节点世界中编写unit testing。 如果你这样做，你将使用import语句访问Animal类。
对于初学者来说，这是一个复杂的话题，我build议你学习CommonJS是什么以及如何将它转换成浏览器代码。