28 webpack中处理TypeScript

处理TypeScript

JavaScript发展到现在，已经十分成熟了，从传统的网页脚本，到后端服务,再到桌面客户端程序几乎到处都可以看见它的身影。它在带给我们惊喜的同时，由于其本身设计的缺陷也时常给我们带来困扰。全局变量window的使用泛滥，var定义任意类型的变量等等问题，在我们开发庞大复杂系统时候，常常让我们痛苦不堪。其间虽然出现了const，let等新特性来约束JavaScript变量定义的问题，但是始终不能像Java等语言那样做到严格的约束。

TypeScript的问世改变了这一现状，严格来说TypeScript并不算一门新的语言，官方的介绍TypeScript是JavaScript的一个超集，专门用于来代码层面来约束JavaScript。很可惜的是到现在没有专门的解析器用于解析TypeScript，最后使用TypeScript编写的代码还是会转换成JavaScript。

对TypeScript处理的配置如下：

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.ts?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

使用Ts-loader来转换TypeScript的时候还需要在项目根目录下配置tsconfig.json,用于告诉Ts-loader怎么解析TypeScript：

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "allowJs": true
    }
}

TypeScript中的类型检测可以规范我们变量的定义，也就是因为类型检测，导致我们的构建速度慢了下来。Webpack在构建的时候会对涉及到的TypeScript文件进行类型检测和其他检测，这是一个耗时的过程。可以做出如下配置，加速Webpack的构建：

{
    test: /\.ts?$/,
        use: {
        loader: 'ts-loader',
            options: {
            transpileOnly: true
        }
    },
    exclude: /node_modules/,
}

transpileOnly表示是否跳过类型检测等操作，设置为true使得构建速度大幅度提升，当同时也会关闭类型检测。当我们给index.ts中的people对象添加没有在接口People中定义的额外属性attr：

const people: People = {
    name: 'render',
    job: 'bug制造者',
    age: 18,
    attr: ''
}

Webpack还是能够构建成功，这并不是我们想要的，当变量不符合规定类型的时候我们希望能够产生出错误提示，让我们去定位和解决问题。使用Fork-ts-checker-webpack-plugin插件可以很好解决我们的问题。配置如下：

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.ts?$/,
                use: {
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: true
                    }
                },
                exclude: /node_modules/,
            }
        ]
    },
    plugins: [
        new ForkTsCheckerwebpackPlugin()
    ],
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

使用了Fork-ts-checker-webpack-plugin插件可以使得的TypeScript类型检测生效并且加速该过程，该插件的作用就是将相关的检测操作移至单独的进程进行操作，以此来提升构建速度。

本章节提供案例源码下载:https://gitee.com/mvc_ydb/webpack/blob/master/typescript.zip