第一个TS文件编译错误Uncaught ReferenceError: exports is not defined以及应对方案

第一次用TypeScript写JS的同学估计都趟过这个坑：

1. 写一个类：

 

 

export class Animal {

}

2. 直接用 tsc 编译，并在index.html中使用

 

 

 

 3.运行后，浏览器报错误，

 

 animal.js:2 Uncaught ReferenceError: exports is not defined

 

感受入手的时候我直接懵了，TypeScript 怎么连这么简单的代码都编译错误，真气人。

仔细一看，原来是 TypeScript 支持写导出这样的模块化代码，但是人家并不负责实现。

如果你用了 commonjs requirejs，TypeScript 编译后的JavaScript 代码就可以直接运行。

但是由于浏览器端并没有实现，如果你不用支持模块化的三方库。就会崩。

 

当然，这里你可以用webpack打包，简单又好用。不过webpack有点沉，况且以前那么多老项目，没有webpack的时候难道不能用了吗？

不尽然，其实我们也可以用 TypeScript 内置的模块实现：

例子：

1. 准备两个ts文件

 改写ts 文件，外层套上一个module，另一个ts文件想要引用，需要加上

/// <refernce path='xxx' />

module MyModule {
    export class Animal {

    }
}

 

/// <reference path = "animal.ts" />

module MyModule {
    export class Dog extends Animal {

    }
}

 

 2.编写tsconfig

{
    "compilerOptions": {
        "sourceMap": false,
        "target": "es5",
    },
    "include": [
        "./**/*.ts"
    ],
}

 

现在运行tsc，再到浏览器看看，一切就正常工作了

 

 

webpack 配置也很简单，就是先得装个 webpack

npm install webpack

 

配置文件：

module.exports = {
    entry: __dirname + "/main.ts",
    mode: 'development',
    output: {
        path: __dirname + "/output",
        filename: "bundle.js",
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    },
    devtool: 'none'
}