zoukankan      html  css  js  c++  java
  • 第一个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'
    }
  • 相关阅读:
    Mysql:存储过程
    mysql-8.0.21的安装
    java8:四大函数式接口(Consumer、Supplier、Function、Predicate)
    java8:Lambda表达式、函数式接口
    Nginx:负载均衡
    JeecgBoot:开发环境准备(安装Node.js、yarn、WebStorm、Nodejs镜像)
    Nginx:反向代理(案例)
    Mysql:性能分析
    Nginx:初识Nginx(概念、在Docker中安装Nginx、常用命令、配置文件)
    Docker 实战之Registry以及持续集成
  • 原文地址:https://www.cnblogs.com/chenyingzuo/p/12734062.html
Copyright © 2011-2022 走看看