网站搜索

javascript - 在 gulp 和 nodejs 中使用 Typescript 时,对 require 和 exports 的未定义引用


我过去一直用纯 JavaScript 编写我的网页应用程序,直到我了解了 TypeScript。它是 JavaScript 的一个很好的超集,如果我用它编写并编译,然后使用我的 WAMP 服务器执行,我没有遇到任何问题。

但我听说过 Angular2(我知道 Angular1),我开始使用 https://www.lynda.com/AngularJS-tutorials/Learn-AngularJS-2-Basics/428058-2.html 课程学习它。

他使用了 nodejs、gulp、gulp-webserver。我按照他的方法进行了完全相同的设置,但最后我得到了

未捕获的引用错误:exports 未定义 @ animal.ts:1。
未捕获的引用错误:require 未定义 @ cat.ts:1

然后我转而先学习如何从 https://www.youtube.com/watch?v=7xOubdqyqaY 设置 Gulp 环境

这是我的项目目录结构:

typescript/
|--app/
----index.html, load animal.js, cat.js from js/
----|--js, contains all compiles js files( animal.js, cat.js )
-------|--lib, contains all library files
|--node_modules/
|--typescript/, contains my written typescript files 
---|--animal.ts
---|--cat.ts
|--typing/s, contains typescript definition files
|--gulp.config.js
|--gulpfile.js
|--package.json
|--tsconfig.json
|--tslint.json

当我在根文件夹(typescript)中的 cmd 中运行 gulp 命令时,它会运行所有任务,编译所有 ts 文件,进行代码检查,并使用 browser-sync 和 superstatic 提供服务。但是我遇到了相同的错误

未捕获的 ReferenceError:exports 未定义 @ animal.ts:1。
未捕获的 ReferenceError:require 未定义 @ cat.ts:1

我的文件内容:

animal.ts

export class Animal {
    constructor( private name: string, private sound: string ) {
    }  
    makeSound() {
        console.log( `${this.name} makes ${this.sound}` );
    }
}
let a: Animal = new Animal( "tiger33", "Gurrrrrr" );
a.makeSound();

猫.ts

import {Animal} from "./animal" 
let b: Animal = new Animal( "Cat", "Mewww" );
b.makeSound();

请告诉我我做错了什么。我已经全局安装了 node、gulp、tsc。我是否需要安装 browserify 或 requireJS,但是视频中他们没有使用这些。谢谢

答案 #1

最终使用Browserify让它运行起来了。

这里的步骤。