第一個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'
}