情况
我正在使用我编译成 JS 的 typescript 在 web 应用程序的前端工作。我想在生成的 js 上运行 qunit 测试。我的 typescript 使用 browserify 合并到一个文件中我想对我的 js 对象运行测试。我正在使用 war 包在 tomcat 网络服务器中运行没有 Node 的 js。
问题
我找不到我生成的类 js(访问问题或隐藏对象....)？当我尝试在 js 脚本中使用 animal.js 时无法访问 Animal 类!？如何在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);
构建运行命令 我在 typescript lang 中引用了带有 browserify 的 Node 。网站
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 但它肯定不存在。您需要另一个应该与 QUnit 一起使用但不包含在开发/生产代码中的 JS/TS 文件:
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') 替换为 test_main.ts。
出了什么问题？
如果您正在使用 ES6 导出/导入模块，则意味着您正在使用“CommonJS”模块系统。当您使用 tsify 时，Typescript 代码会转换为 Node 兼容的 JS 代码。然后使用 browserify 将 Node 兼容的 JS 代码转换为浏览器兼容的 JS 代码。浏览器本身不支持 CommonJS 模块系统。所以“browserify”试图模仿它，这就是为什么你需要为它提供一个单一的入口点。
您的问题还有其他解决方案，例如您可以在 TypeScript 或 Node 世界中编写单元测试。如果这样做，您将使用 import 语句访问 Animal 类。
这对初学者来说是一个复杂的话题，我建议你了解什么是 CommonJS 以及 browserify/webpack 等如何将其转换为浏览器代码。
关于javascript - 找不到我从 Typescript 构建的 javascript 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36529552/